svg动画实例解析

svg动画

首先，根据基础篇我们可以知道svg里面有很多元素，如果我们需要让他们动起来，我们可以用svg里面的animate元素。

pia个最简单的例子，一条线，他开始的位置会横向移动。（由于我不会做gif，所以你们自己试试吧，我就不放动态图了^v^）

再来个例子

同理的，只是会跑到200然后再回来

我们讲下animate元素里面的参数的意义吧。

attributename 属性名称。就是你要修改的是当前所在元素的哪个属性

attributetype

dur 持续时间

repeatcount重复次数。数值 或indefinite(无限)

calcmode 指定动画的插值模式，也就是动画的效果

discrete 离散。从一个值调到另一个值

linear 线性。从一个值类似滑动到另一个值

paced 匀速。匀速变化。如果定义了paced则 keytimes keysplines会被忽略

spline 贝塞尔曲线。曲线的点在 keysplines 属性中定义

keytimes 类似css的@keyframes（如果不知道是什么，请先了解css的动画，css的动画相对于svg简单些）设置0~1过程中不同的时间点，以;分割

values 和keytimes对应，即在不同时间内到达何种位置

keysplines 以;分割。比如 a,b,c,d; 这一组的意思是cubic-bezier(a,b,c,d)。而由于这个是表示两个时间点之间的动画，所以它的数值会是keytimes的数量-1

from to 从哪开始，从哪结束
by 变化值，当有to的时候，这个失效

这里有几个例子，先扔这把

这个的效果就是长方形不断改变宽度