svg 动画介绍

简介

svg 为动画提供了完整的支持，svg 动画可以让 svg 元素的属性产生周期性的过渡，旋转、平移或者沿路径运动也手到擒来，甚至有自己的事件支持。

svg 的动画在 IE 中没有支持。

相比 css 动画来说，svg 动画是更加强大的。

svg 用来处理动画效果的元素有以下几个：

  • <set>，用来设置一个值的持续时间，支持所有属性类型。它是非叠加的。（非叠加的定义可以看后面的 累加属性。）

  • <animate>，用来设置一个元素的某个属性在一定时间内如何变化。

  • <animateTransform>，专门用来处理 transform 属性的动画效果。

  • <animateMotion>，用来设置一个图形如何沿着某条路径移动。

    <mpath>，如果在 <animateMotion> 中需要复用路径，那么可以使用该元素对其他路径进行引用。

在以前还有个 <animateColor> 元素，不过该元素已经被废弃，不再推荐使用。

除了上面所说的动画元素，动画元素的大部分属性也是相通的。动画属性也有分类，一个元素会使用其中至少一类属性。动画属性有：

  • 动画属性目标属性

    attributeType、attributeName

  • 动画时间属性

  • begin, dur, end, min, max, restart, repeatCount, repeatDur, fill

  • 动画取值属性

    calcMode, values, keyTimes, keySplines, from, to, by, autoReverse, accelerate, decelerate

  • 动画额外属性

    additive, accumulate

另外，svg 动画还提供三个动画事件：

onbegin, onend, onrepeat

可动画的元素与属性

并不是所有元素或者属性都可以进行动画，你可以去 W3C 动画的 19.2.17 节 Elements, attributes and properties that can be animated。

set 演示

使用 set 可以让一个属性的值改变并持续一段时间。

比如下面代码中，在点击矩形的时候，set 就设置了矩形的圆角为 2，并持续了 1s：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" viewBox="0 0 10 10">
	<rect id="Rect1" x="0" y="0" height="10" width="10" fill="silver">
		<set attributeName="rx" to="2" begin="Rect1.click" dur="1s" />
	</rect>
</svg>

效果如下，你可以尝试点击矩形区域：

animate 演示

使用 animate 可以让一个元素的一个属性的数值阶段性的变化，过渡是否平滑取决于属性是否支持平滑过渡。

比如下面代码让一个矩形的圆角按照 0，5，0 的顺序持续过渡无限次，每次周期为 3s：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" viewBox="0 0 10 10">
	<rect id="Rect1" x="0" y="0" height="10" width="10" fill="silver">
		<animate attributeName="rx" values="0;5;0" dur="3s" repeatCount="indefinite"></animate>
	</rect>
</svg>

效果如下：

animateTransform 演示

animateTransform 用来更好的设置 transform 属性动画效果。

下面绘制了一个六角星，并使用 animateTransform 对六角星在 XML 命名空间下的 transform 属性进行了一个动画设置，以 10s 为一个周期，基于点 (1.1, 1.1) 从 0 到 360 角度无限次旋转。

代码如下：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="200" viewBox="0 0 2.2 2.2">
	<path
		d="M 1.1 0.1 l 0.866 1.5 l -1.732 0 z M 1.1 2.1 l -0.866 -1.5 l 1.732 0 z"
		fill="black"
		stroke="skyblue"
		stroke-width="0.05"
	>
		<animateTransform
			attributeName="transform"
			attributeType="XML"
			type="rotate"
			from="0 1.1 1.1"
			to=" 360 1.1 1.1"
			dur="10s"
      repeatCount="indefinite"
		></animateTransform>
	</path>
</svg>

效果如下：

animateMotion 演示

animateMotion 可以让一个图像跟随一个路径进行移动，这个路径可以通过 path 属性直接定义，也可以使用 mpath 元素进行引用。

下面代码画了一个 ∞ 路径，并让一个小圆随着这个路径进行移动：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="300" height="300" viewBox="0 0 22 22">
	<path
		id="Path-1"
		d="M2 10 c6,10 12,-10 18,0 c-6,10 -12,-10 -18,0"
		stroke-width="0.2"
		stroke="red"
		fill="none"
	></path>
	<circle r="1" fill="skyblue">
		<animateMotion dur="10s" repeatCount="indefinite">
			<mpath xlink:href="#Path-1"></mpath>
		</animateMotion>
	</circle>
</svg>

效果如下：

关于此文档