1、接上篇SVG动画的属性详解
1.1 animation参数
1.1.1 attributeName
你想改变的属性名称,① 可以是元素直接暴露的属性,例如,以上案例出现的改变x, y又或者font-size; ② 可以是CSS属性。例如,透明度opacity.
1.1.2 attributeType
attributeType支持三个固定参数,CSS/XML/auto. 用来表明attributeName属性值的列表。x, y以及transform就属于XML, opacity就属于CSS. auto为默认值,自动判别的意思(实际上是先当成CSS处理,如果发现不认识,直接XML类别处理)。因此,如果你不确信某属性是XML类别还是CSS类别的时候,我的建议是不设置attributeType值,直接让浏览器自己去判断,几乎无差错。
我想大家都有和我一样的疑问:“既然浏览器酱可以自己判断属性类别,那这个属性还有什么意义吗?”可能某些属性,XML有其作用,CSS也有其作用,例如font-size, 此时就需要明确下归属。
1.1.3 from to by values dur
from = ““
动画的起始值。
to = ““
就是to的值
指定动画的结束值。(绝对)
by=””
by最后的结束值=from的值+by的值
指定动画的结束值(相对)
Values=””(可以存在多个)
dur = ““
完成动画的时间
1.1.4 begin end
begin指动画开始的时间,看上去很简单。设个时间,延迟嘛~~实际上非也非也,上面出现的beigin="3s"只是最简单最基本的表示。
begin的定义是分号分隔的一组值。看到没?是一组值,单值只是其中的情况之一。例如,beigin="3s;5s"表示的是3s之后动画走一下,6s时候动画再走一下(如果之前动画没走完,会立即停止从头开始)。所以,如果一次动画时间为3s, 即dur="3s",同时没有repeatCount属性时候,我们可以看到动画似乎连续执行了2次。
begin的值可以是触发事件
begin的值可以是某个动画执行n次之后
1.1.5 repeatCount,repeatDur
repeatCount表示动画执行次数,可以是合法数值或者”indefinite“(动画循环到内存耗尽)。
repeatDur定义重复动画的总时间。可以是普通时间值或者”indefinite(动画循环到内存耗尽)。
作者:陆家嘴种菜
链接:https://www.jianshu.com/p/f0f5e2ababea