SVG之Animation

元素用于实现动画效果&＃xff08;动画截图比较麻烦&＃xff0c;本文中的例子最好直接写demo看效果&＃xff09;

基本动画

将元素嵌入到元素内&＃xff0c;来实现该元素的动画效果。

以上代码会一个200*20的长方形&＃xff0c;在5秒内渐变成一个20*20的正方形&＃xff0c;并且在动画结束时停留在正方形的状态。

元素的基本属性&＃xff1a;

• attributeName

定义发生变化的元素属性名

• attributeType

当attributeType&＃61;"XML"时&＃xff0c;attributeName被认为是XML的属性&＃xff1b;当attributeType&＃61;"CSS"时&＃xff0c;attributeName被认为是css的属性&＃xff1b;不指定attributeType时&＃xff0c;默认为"auto"&＃xff0c;会先将attributeName作为css的属性&＃xff0c;如果无效&＃xff0c;再将attributeName作为XML的属性。

• from & to & by

from和to分别定义发生变化的属性的初始值和终止值。from可缺省&＃xff0c;表示初始值即为父元素相应的属性值。可用by替换to&＃xff0c;表示变化偏移量。可以理解为to &＃61; from &＃43; by。

• begin & dur & end

begin定义动画开始时间&＃xff1b;dur定义动画所需时间&＃xff1b;end定义动画终止时间。时间单位h&＃xff1a;小时&＃xff1b;min&＃xff1a;分钟&＃xff1b;s&＃xff1a;秒&＃xff1b;ms&＃xff1a;毫秒。默认时间单位为s

• fill

当fill&＃61;"freeze"时&＃xff0c;动画终止时&＃xff0c;发生变化的元素属性值停留在动画终止时的状态&＃xff1b;当fill&＃61;"remove"时&＃xff0c;动画终止时&＃xff0c;发生变化的元素属性值回复到动画起始时的状态。fill属性默认值为remove。
允许在同一个元素内嵌入多个

动画时间

当begin设置为一个具体时间&＃xff0c;比如2s&＃xff0c;svg会在元素加载完毕后&＃xff0c;过2秒开始执行动画。
begin还可以指定一个其他的begin或者end&＃xff0c;比如&＃xff1a;

第二个圆的动画执行起始时间为第一个圆动画执行完毕时间。
begin属性还可以进行简单计算&＃xff1a;
begin&＃61;"c1.end&＃43;1.5s"&＃xff1a;表示动画执行起始时间为第一个圆执行完毕后的1.5秒。

当end设置为一个具体时间&＃xff0c;比如2s&＃xff0c;svg会在元素加载完毕后&＃xff0c;过2秒即停止执行动画&＃xff0c;不管这个元素的动画是否执行完毕。如果end设置的比begin小&＃xff0c;则动画根本不会执行。

end同样可以指定一个其他的begin或者end&＃xff0c;同样支持计算。

重复动画

通过设置repeatDur或者repeatCount属性&＃xff0c;让动画重复执行。

• repeatDur

设置动画执行的总时长。在repeatDur设置的时间内&＃xff0c;动画一直会重复执行。如果repeatDur小于dur&＃xff0c;repeatDur的作用与end一样。

• repeatCount

设置动画重复执行的次数。
repeatDur和repeatCount都可以通过设置为indefinit实现无限循环动画。
当repeatDur和repeatCount同时作用于同一个时&＃xff0c;动画终止时间取两者中较小值。
repeat可作为begin和end中的参数使用&＃xff1a;

长方形的动画会在圆形动画执行过一遍后延迟2.5秒后开始执行。
repeat(n)中的n需大于0。

复杂属性的动画

动画还可作用于颜色、paths、d等非纯数字属性。

颜色的动画过程可以分解成r,g,b,a四个数字的渐变。比如从#f00变化到#0f0&＃xff0c;红色部分从1渐变到0&＃xff0c;绿色部分同时从0渐变到1。
paths和d要实现动画有一个前提&＃xff0c;其参数个数不能变。变化前后参数一一对应&＃xff0c;所有参数同时渐变。

多节点动画

实现一个属性的连续变化有两种方式&＃xff1a;

1. 多个组合
2. 使用value &＃43; keyTimes &＃43; calcMode属性

基础动画中提到过多组合方式&＃xff1b;这里说下values &＃43; keyTimes &＃43; calcMode。

• values

values属性值表示一个动画经过的节点数值&＃xff0c;数值间以分号分割。

上例中1秒内&＃xff0c;圆的半径由20变为50&＃xff0c;再由50变为20。

• keyTimes

keyTimes属性值与values属性值一一对应&＃xff0c;第一个数值永远是0&＃xff08;表示起始时间点&＃xff09;&＃xff0c;最后一个数值永远是1&＃xff08;表示终止时间点&＃xff09;,中间的数值表示变化到对应values属性值时所处时间点百分比(0~1之间)。

上例中0.2秒时圆的半径由20变为50&＃xff0c;在之后的0.8秒又从50变为20。

• calcMode

calcMode可以影响动画各阶段的表现。calcMode有四种属性值&＃xff1a;paced, linear, discrete, spline

calcMode&＃61;"paced"时&＃xff0c;动画会忽略keyTimes属性&＃xff0c;根据values数值以匀速变化。
calcMode&＃61;"linear"时&＃xff0c;动画根据values和keyTimes属性&＃xff0c;在每个时间段内匀速变化。linear为calcMode的默认属性值。
calcMode&＃61;"discrete"时&＃xff0c;动画根据values和keyTimes属性&＃xff0c;去掉过度动画&＃xff0c;到了keyTimes的某个节点&＃xff0c;属性值直接变为values对应数值。
calcMode&＃61;"spline"时&＃xff0c;需要配合keySplines属性&＃xff0c;设置每个时间段内的三次贝塞尔变化曲线。

上例中加上贝塞尔曲线后圆形的变化有点类似心跳的节奏。

元素也可设置属性变化的动画&＃xff0c;但与有明显区别&＃xff1a;

• 不需要from属性&＃xff0c;起始状态即为父节点属性值。
• 一到begin属性设置的时点&＃xff0c;指定的attributeName属性值即改为to指定的属性值&＃xff0c;没有过度动画。
• attributeName可以是属性值非数字的属性&＃xff0c;如style&＃61;"visibility: hidden;"

All gone!


上例中1秒后显示All gone!&＃xff0c;再过1秒后文字移动至&＃xff08;120,60&＃xff09;。

要实现transform属性改变的动画&＃xff0c;需要使用来替代。

的attributeName指定为transform&＃xff08;个人感觉有点多余&＃xff0c;animateTransform本身就是应用于改变transform属性值的&＃xff09;。用type属性指定transform需要改变的属性&＃xff08;translate, scale, rotate, skewX, skewY&＃xff09;。

还有个additive属性。上例中两个同时作用于一个元素&＃xff0c;默认情况下additive属性值为replace&＃xff0c;表示当前的初始状态与之前的变化结果无关。如果additive&＃61;"sum"&＃xff0c;表示当前的变化基于之前的变化之上。

上例结果&＃xff1a;

(刚看到一个长方形使用rotate会变成一个菱形感觉哪里不对&＃xff0c;再回想了一下translate的本质和形变的次序&＃xff0c;就明了了)

是个很强大的元素&＃xff0c;之前所有动画功能在css里都可以用animation实现&＃xff0c;但能实现的功能是单凭css无法实现的。
可以让父元素沿着指定的路径运动&＃xff01;
直线路径可以简单使用from &＃43; to属性来指定起点和终点&＃xff1a;

也可以实用path指定复杂的路径

也可以指定元素作为自己的路径

有个rotate属性&＃xff0c;默认为0&＃xff0c;元素在运动时不会旋转。当设置为auto时&＃xff0c;元素对应的水平轴会始终与path路径保持水平&＃xff0c;上图中加上rotate&＃61;"auto"后的效果就像是车子开过山坡。

节点

与多节点动画类似&＃xff0c;也有三个属性用于控制动画的节点。

• keyPoints

第一个属性值为0&＃xff08;表示path路径的起始位置&＃xff09;&＃xff0c;最后一个属性值为1&＃xff08;表示path路径的终点位置&＃xff09;&＃xff0c;各属性值用分号分割&＃xff0c;每个属性值与keyTimes的属性值一一对应&＃xff0c;表示到某个时点运动到相对于路径的哪个位置。

• keyTimes

第一个属性值为0&＃xff08;表示动画起始时间&＃xff09;&＃xff0c;最后一个属性值为1&＃xff08;表示动画终止时间&＃xff09;&＃xff0c;各属性值用分号分割&＃xff0c;每个属性值与keyPoints的属性值一一对应&＃xff0c;表示运动到某个位置需要的总动画时常占比。

• calcMode

与多节点动画中的calcMode属性值及作用完全一致。

CSS动画

css中有两种实现动画的方式&＃xff1a;transition和animation。
transition用于实现较简单的两点动画&＃xff0c;即根据属性的起始状态和终止状态&＃xff0c;完整中间过渡动画。

transition

transition动画相关的css属性如下

• transition-property

定义动画属性&＃xff0c;可定义多个属性&＃xff0c;逗号分隔

• transition-duration

定义动画执行时间&＃xff0c;单位(s,ms)&＃xff0c;可定义多个属性&＃xff0c;与transition-property一一对应&＃xff0c;逗号分隔

• transition-timing-function

与calcMode类似&＃xff0c;影响动画的表现。默认值为ease。可选项有&＃xff1a;ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(, , , )

• transition-delay

定义动画延迟多少时间后开始执行

其中transition-timing-function中的step-start、step-end和steps有点类似calcMode中的discrete模式&＃xff0c;状态之间切换没有中间过渡。具体来说stepts([, [start | end]])的第一个参数必须为正整数&＃xff0c;表示分几步变化&＃xff0c;第二个参数设置为start时&＃xff0c;表示在动画开始执行时就进行变化&＃xff0c;设置为end表示在动画经过transition-duration设置的时间才开始变化&＃xff0c;第二个参数允许省略&＃xff0c;缺省值为end。step-start相当于steps(1, start)即属性一开始就变为最终状态&＃xff1b;step-end相当于steps(1,end)即属性经过transition-duration设置的时间后立刻变为终止状态。

#car{transition-property:width, height;transition-duration:1s, 3s;transition-timing-function: ease-in, cubic-bezier(1,0,0,1);transition-delay:2s, 0.5s;
}

可使用transition缩写简化上例中的css&＃xff0c;直接从W3C规范里抄了下缩写组成部分。


transition: [ ‘,’ ]* &＃61; [ none | ] || || ||

第一个对应transition-duration&＃xff0c;第二个对应transition-delay。
如果有一个里的第一个参数设置为none&＃xff0c;则整个transition无效。也就是说none只能这么用&＃xff1a;transition:none

#car{transition:width 1s ease-in 2s, height 3s cubic-bezier(1,0,0,1) .5s;
}

animation

animation可以说是transition的高级版&＃xff0c;配合&＃64;keyframes可以实现对动画过程的多点控制。除了svg中延指定path路径运动的动画实现不了&＃xff0c;其他都可以用animation来实现。其很多属性与svg的元素属性作用也能一一对应。
先看下animation的属性

• animation-name

对应的attributeName属性&＃xff0c;属性值为&＃64;keyframes名对应&＃xff0c;后面再说&＃64;keyframes

• animation-duration

对应的dur属性

• animation-timing-function

对应的calcMode属性&＃xff0c;可用三次贝塞尔曲线来设置动画运行的效果

• animation-iteration-count

对应的repeatCount属性。默认为1。infinite表示无限重复&＃xff08;不同于repeatCount的indefinte&＃xff09;

• animation-delay

动画延迟执行时间。有点类似的start属性的作用&＃xff0c;用start加上一些事件和时间的计算&＃xff0c;也可以实现延迟执行动画的效果

• animation-fill-mode

类似的fill属性&＃xff0c;但有区别。animation-fill-mode有四个属性值可选&＃xff1a;none | forwards | backwards | both。

- **forwards**类似fill的freeze&＃xff0c;动画结束后保持最后一帧时的状态。- **backwards**这个功能svg里好像没有。backwards是配合animation-delay一起使用的&＃xff0c;如果动画延迟执行&＃xff0c;那么在开始执行之前处于延迟的这段时间内&＃xff0c;动画对象元素的默认状态是其原始状态&＃xff0c;而非&＃64;keyframes的起始状态。当animation-fill-mode设置成backwards时&＃xff0c;动画对象元素在延迟的这段时间内&＃xff0c;将处于&＃64;keyframes设置的起始状态。- **both**相当于同时设置了forwards和backwards两个属性值。- **none**none是animation-fill-mode的默认属性值&＃xff0c;即动画开始前和动画结束后&＃xff0c;对象元素均处于其原始状态。

• animation-play-state

animation-play-state顾名思义控制动画状态的&＃xff0c;两个属性值也好理解。

- **running**
表示让动画执行
- **paused**
表示暂停动画
可以通过改变这个属性来控制动画的播放和暂停&＃xff0c;pause改为running后不会让元素重头再执行一遍动画&＃xff0c;而是接着暂停时的状态继续变化。

• animation-direction

这个属性用于控制动画是正向执行&＃xff0c;或者反向执行&＃xff0c;如果设置了animation-iteration-count重复执行次数&＃xff0c;还能控制一次动画执行完毕后&＃xff0c;以何种方式执行接下去的一次动画。有四个属性值normal | reverse | alternate | alternate-reverse

- **normal**默认属性值&＃xff0c;动画正向执行&＃xff0c;重复执行动画时&＃xff0c;每次都从起始状态开始变化。- **reverse**动画反向执行&＃xff0c;即从指定的终止状态变化到起始状态&＃xff0c;重复执行动画时&＃xff0c;每次都从终止状态开始变化。其中animation-timing-function设置的运动曲线也会被颠倒&＃xff0c;原来的ease-in会变成ease-out的效果。- **alternate**第一次执行动画时&＃xff0c;从起始状态开始变化。重复执行动画时&＃xff0c;单次动画结束后&＃xff0c;下一次动画以当前状态作为起始状态开始变化&＃xff0c;以上一次动画的起始状态作为该次动画的终止状态&＃xff0c;相当于执行一次reverse的动画效果。- **alternate-reverse**和alternate类似&＃xff0c;但是第一次执行动画时&＃xff0c;从指定的结束状态开始向起始状态变化。

可以用animation来缩写以上所有属性&＃xff1a;

animation: [ ‘,’ ]* &＃61; || || || || || || ||

其中第一个为animation-duration&＃xff0c;第二个为animation-delay。

再来看与animation紧密相关的&＃64;keyframes
&＃64;keyframes的作用类似values &＃43; keyTimes&＃xff0c;可精细设置动画过程中每个变化节点。
&＃64;keyframes必须包含一个动画起始状态信息&＃xff0c;和一个动画终止状态信息。可以用from &＃43; to&＃xff0c;也可以用0% &＃43; 100%&＃xff1a;

&＃64;keyframes rotate1{from {left: 0;top: 0;}to {left: 100px;top: 100px;}
}
&＃64;keyframes rotate2{0% {left: 0;top: 0;}100%{left: 100px;top: 100px;}
}

以上两段代码等价&＃xff0c;都表示起始状态的left和top属性为0&＃xff0c;终止状态的left和top属性为100px。
对于中间动画节点&＃xff0c;比如在动画进行到四分之一时&＃xff0c;希望left为50px&＃xff1a;

&＃64;keyframes rotate2{0% {left: 0;top: 0;}50%{left: 50px;}100%{left: 100px;top: 100px;}
}

另外&＃xff0c;还可以对每段动画的变化曲线做单独设置animation-timing-function属性&＃xff0c;属性需要设置在起始状态信息中&＃xff1a;

&＃64;keyframes rotate2{0% {left: 0;top: 0;animation-timing-function: ease-out;}50%{left: 50px; animation-timing-function: ease-in;}100%{left: 100px;top: 100px;}
}