svg动画元素【1】：感性认识

2019独角兽企业重金招聘Python工程师标准>>>

背景说明：svg动画确切的说是SVG SMIL 动画，SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范，在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点，并提供了一些SVG继承实现。

一、SVG SMIL 动画可以构建CSS3难以构建的动画效果。

比如“沿着指定路径运动”，这种效果在flash中倒是很容易实现，然而svg实现它几乎比flash更简单，代码如下：

  马
    
  
  

在支持SVG SMIL 动画的浏览器如chrome中运行上述代码（ie浏览器全军覆没），你会看到一个“马”字沿着红色路径移动：

上述svg代码的标签的代码，在功能上其实是多余的，是为了显示“马”的移动路径的，即使没有那句代码，“马”一样会沿着指定路径位移。所以说真正的功能代码是：

  马
    
  

animateMotion标签中的path属性值，可以到网上搜索svg-edit编辑器，去生成任意路径并转化为数值形式。

二、SVG SMIL 动画可以比纯css3动画具备更强的交互性，并且不依赖js。

如下代码：

    
    马
        
    

效果截图：

当你点击黑色的实心圆形时，“马”会向圆形方向发生位移。类似的效果还有：

     马
          
     
     
          点击我
     

效果截图：

当点击红色文本“点击我”时，“马”就会位移。

所有上述2个交互，都没有js参与。

本文仅为SVG SMIL animation动画的感性认识，具体更深的掌握还要继续研究。

参考文章http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

参考文章作者的二维码：

转载于:https://my.oschina.net/710409599/blog/308452