Sample – Animate Motion
不写这个Sample还不知道,原来在Testing的时候写的jsAnimateMotion方法在safari上有个小bug,不过现在暂时解决了,还存在一些多transform属性同时设置时的复合变化兼容性没做好。
jsAnimateMotion其实是个多余的方法,因为在SVG里面是直接可以用animateMotion标签直接定义出动画的,但是现在浏览器的对此标签的兼容性真是够差(主要是针对js生成的animateMotion标签各个浏览器支持不好,inline html svg却是各浏览器都支持。),除此之外,还要介绍的有animateColor和animateTransform标签,都是比较给力的,有兴趣的可以去下面的相关链接上看下。
W3C animateXXX标签技术细节:
- animateMotion : http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement
- animateColor : http://www.w3.org/TR/SVG/animate.html#AnimateColorElement
- animateTransform : http://www.w3.org/TR/SVG/animate.html#AnimateTransformElement
当然还要贴上此sample的地址:
http://sheldonw.sinaapp.com/mr-and-ms/Mr.Graph/samples/animate-along.html
(animateAlong感觉更贴切一些)。
附上sample贴图:
PS:时间有限,效果一般,望多体谅。
Comments