svg 动画 animation 元素

1、<set>

2、<animate>

3、<animateColor>

4、<animateTransform>

5、<animateMotion>

1.set

set意思设置,此元素没有动画效果。虽然set虽然不能触发连续的动画,但是,其还是可以实现基本的延迟功能。就是指:可以在特定时间之后修改某个属性值(也可以是CSS属性值)。

2.animate

基础动画元素。实现单属性的动画过渡效果。类似Snap.svg的animate()方法支持的动画效果。

3.animateColor

一看就知道是颜色动画。不过,animate可以实现其功能与效果,因此,此属性已经被废弃。

4.animateTransform

此元素就是一开始给大家开眼界用到的那个元素。一看就知道实现transform变换动画效果的。知识是一脉相承的,这里的transform变换与CSS3的transform变换,以及Snap.svg.js中的transform()方法都是一个路数。

5.animateMotion

animateMotion元素可以让SVG各种图形沿着特定的path路径运动~

相关推荐