svg动画

首先感谢 https://segmentfault.com/a/1190000009378881，要不是看了他的介绍，我想我还很懵呢。

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

<line x1="0" y1="0" x2="100" y2="200" style="stroke:rgb(255,0,0);stroke-width:2">
    <animate attributeType="XML" attributeName="x1" dur="5s" repeatCount="indefinite" calcMode="linear"  to="200"></animate>
</line>

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

再来个例子

<line x1="0" y1="0" x2="100" y2="200" style="stroke:rgb(255,0,0);stroke-width:2">
    <animate attributeType="XML" attributeName="x1" dur="5s" values="100;200;100"></animate>
</line>

同理的，只是会跑到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的时候，这个失效

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

<rect x="0" y="20" width="0" height="50" style="fill:blue;">
    <animate attributeName="width" dur="5000ms" repeatCount="indefinite" 
             calcMode="linear" to="200"></animate>
</rect>

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

猜你喜欢