SVG SMIL 动画介绍以及其属性文档
2017-02-12 21:18

SVG SMIL 动画介绍

svg SMIL全称是Synchronized Multimedia Integration Language,翻译过来是同步多媒体语言,用来实现SVG动画的一门专门的语言。

使用SMIL你可以做的事情:

改变元素的数值属性实现动画;

改变元素的transform变化属性实现动画;

改变元素颜色实现动画;

让元素沿着一个path路径实现动画;

可以说SMIL动画的功能是十分强大的。

SVG SMIL动画通过添加一个元素,例如<animate>到要实现动画的svg元素中来实现动画效果。

先上一段代码看一下直观的用法:

<svg viewBox="0 0 500 500">
    <circle  r="50" cx="225" cy="225" 
    stroke="#8194AB" stroke-width="8" fill="none">
    </circle>
    <circle   r="50" cx="225" cy="225" 
    stroke="#036DF0" stroke-width="8" 
    fill="none" stroke-dasharray="40,315" >
        <animateTransform attributeName="transform" 
        type="rotate" from="0 225 225" 
        to="360 225 225" begin="0s" dur="2s" 
        repeatCount="indefinite">
        </animateTransform>
    </circle>
</svg>

效果如下:

svgloading.png

来个demo,在chrome,firfox中点开体验一下:svg SMIL 圆形loading

SVG SMIL 文档整理

下面我通过整理资料,以文档的形式列出SMIL的元素和属性,以便大家可以查阅。

SMIL属性

属性名介绍备注
attributeName
设置进行动画的属性
from
动画属性的初始值
to
动画属性的结束值
dur

动画进行的事件(e.g:5s)


attributeType
枚举值:css/xml/auto,用来表示动画的类型,默认css,auto自动识别

values
用分号(;)分割的多个值,表示动画的几个关键帧
设置values时from,to,by被忽略
by动画属性的相对变化值
begin
动画的开始时间

calcMode,keyTimes,keySplines
用来设置动画的快慢速度,可以是贝塞尔曲线
repeatCount
动画执行的次数,"indefinite"表示无限循环

repeatDur
重复动画总的执行时间
fill
动画间隙的填充方式:freeze/remove
accumulate,additive
动画累计设置,accumulate:none/sum;additive:replace/sum
restart
动画启动机制:always/whenNotActive/never
min,max
动画执行的最短和最长时间
rotate路径动画中是否按照路径的切线旋转
typetransform动画中的属性名类型


svg SMIL动画的标签元素

1,<set>

2,<animate>元素数值属性动画

3,<animateColor>元素颜色动画

4,<animateTransform>元素变化动画,如translate,rotate

5,<animateMotion>元素路径动画

使用这几个标签,我们可以实现svg的动画。

下面给几个svg动画的例子:

<svg viewBox="0 0 500 500">
    <line x1="10" y1="250" x2="50" y2="250"  
    stroke="#0072FF" stroke-width="12" stroke-linecap="round">
        <animate attributeName="x1" begin="0s" 
        values="10 ;10  ;400;450;400;10  ;10 ;" 
        dur="4s" repeatCount="indefinite"></animate>
        <animate attributeName="x2" begin="0s" 
        values="50;100;490;490;490;100;50;" 
        dur="4s" repeatCount="indefinite"></animate>
    </line>
</svg>

效果如下:

svgloading2.png

这是一个左右移动的横线,打开demo体验一下:svg SMIL横线loading

这个例子中使用了values值来设置关键帧,两个animate的关键帧对应,就可以实现出例子中的动画效果。


<svg viewBox="0 0 500 500">
    <path id="bezepath" stroke="#FF0000" 
    stroke-width="1"  fill="none" 
    d="M 10,490 C 100,200 400,300 490,10 C 400,300 100,200 10,490">

    </path>
    <circle r="10" fill="#0072FF" cx="0" cy="0">
       <animateMotion 
       path="M 10,490 C 100,200 400,300 490,10 C 400,300 100,200 10,490 " 
       rotate="auto" calcMode="apline"
       keyTimes="0;0.5;1" 
       keySplines=".2 .6 .8 .4;.8 .4 .2 .6"  
       begin="0s" dur="5s" repeatCount="indefinite">
       </animateMotion>
    </circle>
</svg>

效果如下:

svgloading3.png

点击链接查看svg路径动画效果:svg smil路径动画

这个例子中使用贝塞尔曲线的路径进行动画,calcMode,keySplines用来说设置动画根据贝塞尔曲线的快慢。这里注意circle的位置值是0,0。因为路径动画的路径是以元素的当前位置为坐标系的左上角绘制的,如果我们把cicle的位置设置为10,490,那么整个运动路线就跑到了svg可视区的下面看不到了。

animateTransform文章开始的效果就是用它实现的,根据设置的type类型进行动画。其中的stroke-dasharray是设置虚线的,需要传入的是两个值,第一个是绘制路径的程度,第二个是虚线之间的间隔。transform的rotate动画,传入的第一个值是旋转的角度(deg角度),后面两个值为旋转的中心:x,y 。如果rotate只传入一个值,那么是相对于svg坐标系的原点进行旋转的,这里我们只需要传入x,y为circle的中心点位置就可以了。

svg smil总结

svg的smil动画倒是不难,但是用到的东西比较多,要想熟练掌握,还得要自己多写,多用,才能融会贯通,自后就可以把你的奇思妙想转换成现实了。svg的动画也可以使用css 的keyframes动画设置,但是灵活性不如svg 的smil动画。




原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2548)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1