继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

不需要借助JS和CSS3就能完成的动画(二)

PIPIONE
关注TA
已关注
手记 1070
粉丝 147
获赞 702

1、接上篇SVG动画的属性详解

1.1 animation参数

1.1.1 attributeName

你想改变的属性名称,① 可以是元素直接暴露的属性,例如,以上案例出现的改变x, y又或者font-size; ② 可以是CSS属性。例如,透明度opacity.


webp

webp

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次之后


webp

webp

1.1.5 repeatCount,repeatDur

repeatCount表示动画执行次数,可以是合法数值或者”indefinite“(动画循环到内存耗尽)。

repeatDur定义重复动画的总时间。可以是普通时间值或者”indefinite(动画循环到内存耗尽)。



作者:陆家嘴种菜
链接:https://www.jianshu.com/p/f0f5e2ababea


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP