svg动画 animate

最近使用到svg的动画animate，简单总结下animate的主要属性：

1.定义：SVG 的animate

动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。

2.SVG animate参数详解

2.1 attributeName = <attributeName>

要变化的元素属性名称

a. 可以是元素直接暴露的属性，例如，对应的text元素上的x, y或者font-size;

b. 可以是CSS属性。例如，透明度opacity.

2.2 attributeType = “CSS | XML | auto”
attributeType支持三个固定参数，CSS/XML/auto. 用来表明attributeName属性值的列表。

x, y以及transform就属于XML, opacity就属于CSS. auto为默认值，

自动判别的意思（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）。因此，如果你不确信某属性是XML类别还是CSS类别的时候，我的建议是不设置attributeType值，直接让浏览器自己去判断，几乎无差错。

那么问题来了？“既然浏览器酱可以自己判断属性类别，那这个属性还有什么意义吗？”我觉着可能是某些属性，XML能其作用，CSS也能其作用，例如font-size, 此时就需要明确下归属。

2.3 from, to, by, values

from = “<value>“  动画的起始值
to = “<value>“  指定动画的结束值
by = “<value>“  动画的相对变化值
values = “<list>“  用分号分隔的一个或多个值，可以看出是动画的多个关键值点

from, to, by, values虽然属于一个家族，但是相互之间还是有制约关系的。有以下一些规则：
a. 如果动画的起始值与元素的默认值是一样的，from参数可以省略。
b. （不考虑values）to,by两个参数至少需要有一个出现。否则动画效果没有。to表示绝对值，by表示相对值。拿位移距离，如果from是100, to值为160则表示移动到160这个位置，但是，如果by值是160，则表示移动到100+160=260这个位置。
c. 如果to,by同时出现，则只识别to.
d. 如果to,by,values都没设置，自然没动画效果。如果任意（包括from）一个属性的值不合法，规范上说是没有动画效果。但是，据我测试，FireFox浏览器确实如此，但是Chrome特意做了写容错处理。例如，本来是数值的属性，写了个诸如a这个不合法的值，其会当作0来处理，动画效果依然存在。
e. values可以是一个值或多值。根据我在Chrome浏览器下的测试，是一个值的时候是没有动画效果。多值时候有动画效果。当values值设置并能识别时候，from, to, by的值都会被忽略。那values属性是干什么的呢？别看名字挺大众的，其还是有些功力的。我们实现动画，不可能就是单纯的从a位置到b位置，有时候，需要去c位置过渡下。此时，实际上有3个动画关键点。而from, to/by只能驾驭两个，此时就是values大显身手的时候了！

// 用动画实现一个圆点呼吸灯的效果，即opacity从1到0.2的变化
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">

    <circle cx="50" cy="50" r="4">

        <animate attributeName='opacity' dur='2s' values="1;.2;1" repeatCount="indefinite"/>

    </circle>

</svg>

2.4 begin, end
begin指动画开始的时间，看上去很简单，实际上很复杂的，例如：beigin="3s"只是最简单最基本的表示。

begin的定义是分号分隔的一组值，单值只是其中的情况之一。例如，beigin="3s;6s"表示的是3s之后动画走一下，6s时候动画再走一下（如果之前动画没走完，会立即停止从头开始）。所以，如果一次动画时间为3s, 即dur="3s"，同时没有repeatCount属性时候，我们可以看到动画似乎连续执行了2次。

beigin="3s"也可以简写作beigin="3"， FireFox和Chrome浏览器都是支持的。小数也支持例如：beigin="1.5" 。如果begin属性写错了一律按begin=0处理。

实在复杂不在细说了，有兴趣的同学自己看参考资料。

end指动画结束的时间，end与begin除了名字和字面含义不一样，其值的种类与表意都是一样的，就不啰嗦了。

2.5 dur
dur属性标识了动画的简单持续时间。该属性值比begin简单多多多了，就两种情况：常规时间值 | "indefinite"。

“常规时间值”就是3s之类的正常值；

"indefinite"指事件无限。不过，动画时间无限，实际上就是动画压根不执行的意思。因此，设置为"indefinite"跟没有dur是一个意思，与dur解析异常一个意思。

2.6 repeatCount, repeatDur
repeatCount表示动画执行次数，可以是合法数值或者“indefinite”（无限循环）。

repeatDur定义重复动画的总时间。可以是普通时间值或者“indefinite”（无限循环）。

2.7 fill
fill表示动画间隙的填充方式。

支持参数有：freeze | remove. 其中remove是默认值，表示动画结束直接回到开始的地方。

freeze“冻结”表示动画结束后像是被冻住了，元素保持了动画结束之后的状态。

3.备注

参考：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/animate

http://tutorials.jenkov.com/svg/svg-animation.html

https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

巴特西

svg动画 animate

最新文章

热门文章