SVG五大元素统一江湖
- <set>
- <animate>
- <animateColor>
- <animateTransform>
- <animateMotion>
1.set下面这个「马」会在3
秒之后从横坐标160
的位置移动60
这个位置。
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<set attributeName="x" attributeType="XML" to="60" begin="3s" />
</text>
</g>
</svg>
2. animate
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
</text>
</g>
</svg>
3. animateColor
一看就知道是颜色动画。不过,animate可以实现其功能与效果,因此,此属性已经被废弃。
4. animateTransform
此元素就是一开始给大家开眼界用到的那个元素。一看就知道实现transform
变换动画效果的。
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>
<animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="1.5" repeatCount="indefinite"/>
</g>
</svg>
5. animateMotionanimateMotion
元素可以让SVG各种图形沿着特定的path
路径运动~
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
<animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite"/>
</text>
<path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>
<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马
<animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite"/>
</text>
<path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" />
</svg>
SVG animation参数详解
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
大显身手的时候了!
4. begin, endbegin
指动画开始的时间,看上去很简单。设个时间,延迟嘛~~实际上非也非也,上面出现的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多看不懂的示意。尼玛,这个要通透我周末钓鱼时间都没了,关键是没有必要。所以,我们还是了解下最常见的基本使用。
上面的单位含义都是英文单位的缩写。例如h
表示小时(hour).
时间值支持小数写法,因此,90s
我们也可以使用1.5miu
表示。时间值还支持hh:mm:ss
这种写法,因此,90s
我们也可以使用01:30
表示。
还有一点,十进制的小数值是秒的浮点定义。什么意思呢?就是如果begin="1.5"
没有单位,这里的小数点表示秒,也就是1.5s
的意思。所以,上面N次出现的beigin="3s"
也可以简写作beigin="3"
. 我测了下,FireFox和Chrome浏览器都是支持的。
begin
的单值除了普通value,还有下面这些类别的value:offset-value
| syncbase-value
| event-value
| repeat-value
| accessKey-value
| media-marker-value
| wallclock-sync-value
| "indefinite"
① offset-value
表示偏移值,数值前面有+
或-
. 应该指相对于documentdocument的begin
值而言。
② syncbase-value
基于同步确定的值。语法为:[元素的id].begin/end +/- 时间值
. 就是说借用其他元素的begin值再加加减减,这个可以准确实现两个独立元素的动画级联效果。OK,看完下面的例子一定会豁然开朗,对于上面的offset-value
也会有一定的认知。
<svg id="svg" width="320" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" cx="100" cy="100" r="50"></circle>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">马
<animate attributeName="x" to="60" begin="circle.click" dur="3s" />
</text>
</svg>
④ repeat-value
指重复多少次之后干嘛干嘛。语法为:[元素的id].repeat(整数) +/- 时间值
. 举个例子,下面这个马儿会在水平运动2次之后,斜向运动
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">马
<animate id="x" attributeName="x" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
<animate attributeName="y" to="100" begin="x.repeat(2)" dur="3s" fill="freeze" />
</text>
</svg>
begin="x.repeat(2)"
指id
为x
的元素的动画重复2
次后执行~~
⑤ accessKey-value
定义快捷键。即按下某个按键动画开始。语法为:accessKey(" character ")
. character
表示快捷键所在的字符,举个例子,按下s
键动画走起。SVG代码如下:
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">马
<animate attributeName="x" to="60" begin="accessKey(s)" dur="3s" repeatCount="indefinite" />
</text>
</svg>
按下键盘上的字母"s"
, 理论上动画就会执行。但是,据我测试,我的Chrome浏览器(版本36)上是没有效果的,FireFox浏览器效果杠杠的!
⑥ "indefinite"
就是这个字符串值,表示“无限等待”。据说需要beginElement()
方法触发或者指向该动画元素的超链接(SVG中的a
元素)。
下面代码是beginElement()
方法触发的例子:
<svg id="svg" width="320" height="200" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">马
<animate attributeName="x" to="60" begin="indefinite" dur="3s" />
</text>
</svg>
var animate = document.getElementsByTagName("animate")[0];
if (animate) {
document.getElementById("svg").onclick = function() {
animate.beginElement();
};
}
例子:
<svg width="320" height="200" font-family="microsoft yahei" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<text font-size="120" y="160" x="160">马
<animate id="animate" attributeName="x" to="60" begin="indefinite" dur="3s" repeatCount="indefinite" />
</text>
<a xlink:href="#animate">
<text x="10" y="20" fill="#cd0000" font-size="30">点击我</text>
</a>
</svg>
5. durdur
属性值比begin
简单了好几层楼,就后面两种:常规时间值 | "indefinite"
.
“常规时间值”就是3s
之类的正常值;"indefinite"
指事件无限。试想下,动画时间无限,实际上就是动画压根不执行的意思。因此,设置为"indefinite"
跟没有dur
是一个意思,与dur
解析异常一个意思。
6. calcMode, keyTimes, keySplines
这几个参数是控制动画先快还是先慢类似这样作用的。
calcMode
属性支持4个值:discrete
| linear
| paced
| spline
. 中文意思分别是:“离散”|“线性”|“踏步”|“样条”。
-
discrete
-
from
值直接跳到to
值。
linear
-
animateMotion元素以外元素的
calcMode
默认值。动画从头到尾的速率都是一致的。
paced
-
通过插值让动画的变化步调平稳均匀。仅支持线性数值区域内的值,这样点之间“距离”的概念才能被计算(如
position
,width
,height
等)。如果”paced
“指定,任何keyTimes
或keySplines
值都会打酱油。
spline
-
插值定义贝塞尔曲线。
spline
点的定义在keyTimes
属性中,每个时间间隔控制点由keySplines
定义。
keyTimes = “<list>”
跟上面提到的<list>
类似,都是分号分隔一组值。keyTimes
总名字上看是关键时间点的意思,大致就是这个意思。前面提到过values
也是多值,这里有一些约定的规则:首先,keyTimes
值的数目要和values
一致,如果是from/to/by
动画,keyTimes
就必须有两个值。然后对于linear
和spline
动画,第一个数字要是0
, 最后一个是1
。 最后,每个连续的时间值必须比它前面的值大或者相等。
keySplines = “<list>”keySplines
表示的是与keyTimes
相关联的一组贝塞尔控制点(默认0 0 1 1
)。每个控制点使用4个浮点值表示:x1 y1 x2 y2
. 只有模式是spline
时候这个参数才有用,也是分号分隔,值范围0~1
,总是比keyTimes
少一个值。
如果keySplines
值不合法或个数不对,是没有动画效果的。