HTML5(九)——超强的 SVG 动画

实现transform变换动画效果，与css3的transform变换类似。实现平移、旋转、缩放等效果。

使用语法：

<animateTransform attributeName=“transform” type=“scale”

from=“1.5” to=“0”

begin=“2s” dur=“3s”

repeatCount=“indefinite”>

• repeatCount：重复次数，设置为 indefinite 表示无限循环，一直执行。

• type：添加 transform 变换类型。

• eg：绘制一个半径为200的圆，4秒之后开始缩放，在2秒内从1.5缩小到0倍。

<animateTransform attributeName=“transform” begin=“4s”

dur=“2s” type=“scale” from=“1.5” to=“0”

repeatCount=“indefinite”>

1.5、animateMotion

可以定义动画路径，让SVG各个图形，沿着指定路径运动。

使用语法：

<animateMotion

path=“M 0 0 L 320 320”

begin=“4s” dur=“2s”>

• path：定义路径，使用语法与《HTML5(八)——SVG 之 path 详解》path的d属性一致。

• begin：延迟时间。

• dur：动画执行时间。

eg：绘制一个半径为10的圆，延迟4秒从左上角运动的右下角。

<animateMotion

path=“M 0 0 L 320 320”

begin=“4s” dur=“2s”

实际制作动画的时候，动画太单一不酷，需要同时改变多个属性时，上边的四种元素可以互相组合，同类型的动画也能组合。以上这些元素虽然能够实现动画，但是无法动态地添加事件，所以接