svg波纹_使用SVG创建材质设计波纹效果

svg波纹

View demo 查看演示 Download Source 下载源

With the advent of Google’s Material Design came a visual language that set out to create a unified experience across platforms and devices. Google’s examples depicted through their Animation section of the Material Guidelines has become so identifiable in the wild that many have come to know these interactions as part of the Google brand.

随着Google Material Design的出现，一种视觉语言开始致力于在各种平台和设备上创建统一的体验。 通过《材料指南》中“动画”部分描述的Google实例已经广为人知，以至于许多人作为Google品牌的一部分已经知道了这些互动。

In this tutorial we’ll show you one way of building the ripple effect specifically outlined under Radial Action of the Google Material Design specification by combining it with the powers of SVG and GreenSock.

在本教程中，我们将向您展示一种将涟漪效应与SVG和GreenSock的功能相结合的构建涟漪效应的方法，该效应在Google Material Design规范的“径向作用”下进行了概述。

回应行动 (Responsive Action)

Google defines Responsive Interaction using Radial Action as follows:

Google使用“径向操作”定义了响应式交互，如下所示：

Radial action is the visual ripple of ink spreading outward from the point of input.

径向作用是墨水从输入点向外扩散的视觉波纹。

The connection between an input event and on-screen action should be visually represented to tie them together. For touch or mouse, this occurs at the point of contact. A touch ripple indicates where and when a touch occurs and acknowledges that the touch input was received.

输入事件和屏幕上的动作之间的联系应以视觉方式表示，以将它们绑在一起。 对于触摸或鼠标，这发生在接触点。 触摸波纹指示发生触摸的位置和时间，并确认已接收到触摸输入。

Transitions, or actions triggered by input events, should visually connect to input events. Ripple reactions near the epicenter occur sooner than reactions further away.

转换或由输入事件触发的动作，应在视觉上连接到输入事件。 震中附近的波纹React比远处的React更快发生。

Google makes it very clear that input feedback should take place from it’s origin and spread outwards. For example, if a user clicks a button directly in the center, this ripple will expand outward from that point of initial contact. This is how we indicate where and when a touch occurs in order to acknowledge to the user that input was received.

Google非常清楚地表明，输入反馈应从其来源开始并向外传播。 例如，如果用户直接单击中间的按钮，则该波纹将从初始接触点向外扩展。 这是我们指示触摸发生的位置和时间的方式，以便向用户确认已接收到输入。

SVG中的径向作用 (Radial Action In SVG)

The ripple technique has been authored by many developers using primarily CSS techniques such as @keyframes, transitions, transforms pseudo trickery, border-radius and even extra markup such as a span or div. Instead of using CSS, let’s take a look at how SVG can be used to create this radial action using GreenSock’s TweenMax library for the motion.

许多开发人员都使用了CSS技术(例如@keyframes ， transitions ， transforms伪欺骗， border-radius甚至是额外的标记(例如span或div来编写涟漪技术。 让我们来看看如何使用SVG通过GreenSock的TweenMax库创建该径向动作，而不是使用CSS。

创建SVG (Creating The SVG)

Believe it or not you don’t need a fancy application like Adobe Illustrator or even Sketch to author this effect. The markup for the SVG can be written using a few XML tags that might already be familiar and in use with your own work.

信不信由你，您不需要像Adobe Illustrator或Sketch这样的精美应用程序即可创作此效果。 可以使用一些XML标记来编写SVG的标记，这些标记可能已经很熟悉并且已在您自己的工作中使用。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol viewBox="0 0 100 100"></symbol>
</svg>

For those using SVG sprites for icons, you’ll notice the use of <symbol>. The symbol element allows authors to match the correlating XML within individual symbol instances and subsequently instantiate them—or in other words—use them across an application like a stamp. Each instance stamped is identical to it’s sole creator; the symbol it resi