SVG 动画参数详解

最新推荐文章于 2024-04-19 09:41:08 发布

weixin_34133829

最新推荐文章于 2024-04-19 09:41:08 发布

阅读量1.9k

点赞数 2

原文链接：https://my.oschina.net/benwen/blog/392911

版权

为什么80%的码农都做不了架构师？>>>

1. attributeName = <attributeName>
要变化的元素属性名称，① 可以是元素直接暴露的属性，例如，对于本文反复出现的「马」对应的text元素上的x, y或者font-size; ② 可以是CSS属性。例如，透明度opacity.

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, 此时就需要明确下归属。

3. from, to, by, values
上面4个属性是一个家族的，是最具哲理的一个家族。他们解决的是非常有哲理的问题：你从哪里来？要到哪里去？……

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同时出现，则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大显身手的时候了！例如下面这个聪明的马儿来回跑的效果（没有效果点这里horse-values.svg）：

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="150" x="160">
        马
        <animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

总结下，也就是from-to动画、from-by动画、to动画、by动画以及values动画。

4. begin, end
begin指动画开始的时间，看上去很简单。设个时间，延迟嘛~~实际上非也非也，上面出现的beigin="3s"只是最简单最基本的表示。

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

时间值
既然这里提到了时间，就顺势讲简单一下SVG animation中的时间表示(也适用于dur, end属性)。常见单位有 "h"|"min"|"s"|"ms"

时间值支持的格式和规则相当复杂，例如我我规范上看到这个：1997-07-16T19:20:30.45+01:00. 以及洋洋洒洒N多看不懂的示意。尼玛，这个要通透我周末钓鱼时