svg 动画_中秋节快乐 svg 动画介绍（三）

大家中秋节快乐！

今天继续讲svg的动画属性 animate、animateTransform、animateMotion(第三节)

SVG animateMotion 路径动画

animateMotion 元素让你可以实现一个路径动画，并且根据路径进行旋转。路径使用和相同的方式进行定义。你可以设置属性来定义对象是否根据路径的正切角度来旋转。

animateMotion有那些属性

属性	描述
path	此属性用来规定元素运动的路径，语法与元素的d属性基本一致。
rotate	默认为0，元素在运动时不会旋转。当设置为auto时，方向是固定不变的。

cx="20" cy="20" r="20">

path="M0,0 Q50,60 80,140 T340,100"

dur="10s"

begin="0"

rotate="auto">

width="30" height="40" x="0" y="0">

dur="10s" repeatCount="indefinite" rotate="auto">

xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#motionPath" />

id="motionPath" fill-opacity="0" stroke="red" stroke-width="0" d="M30.5,245.5c...30.5,245.5z"/>

上面的svg效果是一个长方形在做一个循环环绕轨迹，rotate属性为auto方块在沿轨迹运行的时候，方向是根据轨迹而定。

从代码上里看到，animateMotion嵌套mpath元素。

mpath元素提供了引用外部元素作为运动路径的定义的能力。

xlink:href引用需要路径path的#ID。

下面的小例子，结合了之前所讲的东西。

火花运行轨迹效果是用了animateMotion

白线出现效果用了stroke-dashoffset偏移值归0。

火花消失和字颜色出现用了时间值begin的id.end。