html-svg动画-1.1

    首先感谢 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>

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