svg 动画元素

简介

svg 中的动画元素一共有 5 个，其中 animateColor 不推荐使用，在未来的规范可能会将其废弃，还有一个动画组件元素 mpath，所以常用的还剩下以下 5 个：

  • animate，最基本的动画元素，配合动画相关属性进行动画设置。

  • set，对特殊的属性值进行单纯的设置，比如布尔型属性。

  • animateMotion，让图形根据指定的路径进行运动。

  • mpath，引用一段路径作为 animateMotion 的运动轨迹。

  • animateTransform，对 transform 属性进行动画设置。

animate

animate 支持所有所有动画属性。

一些特殊的值属性无法进行过渡的，比如 feTurbulence 滤镜的 seed 随机数属性，随机数的变化会让噪点图直接进行切换，中间无法进行插值。

set

set 主要的功能是在一定时间设置一个属性的简单方法，它本身是没有过渡效果的。他支持所有的属性修改，包括不能合理插入值的类型，例如字符串或者布尔值。set 不支持动画取值属性和动画时间属性。

set 有一个专有属性 to，用来指定持续时间内目标属性的值，to 属性的类型和指定的目标属性相同。

示例：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 20 10">
	<rect id="Set1" x="0" y="0" width="5" height="10" fill="#f0f">
		<set attributeName="width" begin="Set1.click" dur="3s" to="20"></set>
	</rect>
</svg>

上面的代码中指定了一个矩形在点击后执行 set 赋值，宽度将在 3s 的持续时间内保持 10 个单位。效果如下，你可以尝试点击矩形区域：

animateMotion

animateMotion 用于指定图形按照指定轨迹进行移动，该元素仅不支持动画属性目标属性。

该元素很特殊，其他动画元素是由动画属性目标属性来决定动画取值，而 animateMotion 是直接对目标元素进行移动，所以它的取值有一定规范。

animateMotion 的动画相关属性有以下调整：

  • calcMode = “discrete | linear | paced | spline”

    默认值将更改为 paced，也就是整个运动都将变为匀速的。

  • from-to

    from 属性和 to 属性将指定两个坐标点，两个坐标点连接的线段代表运动轨迹，每个坐标点由 x、y 组成，使用逗号进行分割，坐标 (0, 0) 为元素静止时的位置。

    例如 from="0,0" to="1,1"，动画会让图形基于静止位置向右下方进行滑动。

  • values

    values 属性是一个分号分割的点坐标列表，每项 x、y 两个值组成，使用逗号隔开，相邻的点会进行连接形成折线轨迹，坐标点 (0, 0) 为元素静止时的位置。

    例如 values="0,0; 1,10; 2,0"，三组值提供了三个坐标点，形成了一条折线，目标元素会基于这条折线进行运动。

除了这些属性的调整，animateMotion 还额外有几个专有属性：

  • path = “<path-data>”

    该属性指定路径数据定义复杂的图形作为运动轨迹，该属性类型同 path 元素的 d 属性。

    例如让目标元素沿着一条曲线进行运动，可以设置 path="M 0 0 c 3,-15 7,16 15,-13"。

    如果你想指定某个 path 元素作为轨迹，可以参考 mpath 动画组件。

  • keyPoints = “<list-of-numbers>”

    keyPoints 使用分号分割 0 到 1 之间的浮点值，各个浮点值对应 keyTimes 指定的时刻运动的路径所占的百分比。

    keyPoints 相当于映射了 keyTimes 每个时间段运动的距离长度，你依旧可以使用 keySplines 来指定运动速度。

    例如 keyTimes="0, 0.5, 1" keyPoints="0, 0.9, 1" dur="10s" 运动就为：

    • 第一段运动

      持续时间为 (0.5 - 0) * 10s = 5s，运动距离为 (0.9 - 0) * 100% = 90%。

    • 第二段运动

      持续时间为 (1 - 0.5) * 10s = 5s，运动距离为 (1 - 0.9) * 100% = 10%。

  • rotate = “<number> | auto | auto-reverse”

    该属性指定元素沿轨迹运动时的旋转角度。

    • auto

      轨迹会沿着路径的切向量进行旋转。

    • auto-reverse

      轨迹会沿着路径的切向量加 180 度进行旋转。

    • <number>

      指定一个恒定的角度进行旋转，现代浏览器仅支持 0 这个值。如果你想设置恒定的旋转角度，可以为目标元素使用 transform 属性进行变换。

    该属性默认值为 0。

示例：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="400" viewBox="0 0 20 40">
	<defs>
		<g id="AnimateMotionG">
			<path
				id="AnimateMotionPath1"
				d="M 3 15 c 3,-15 7,16 15,-6 "
				fill="none"
				stroke="red"
				stroke-width="0.2"
			></path>
		</g>
	</defs>
	<use xlink:href="#AnimateMotionG"></use>
	<path d="M 0 0 L -1 1 L 2 0 L -1 -1  z">
		<animateMotion dur="3s" rotate="auto" repeatCount="indefinite">
			<mpath xlink:href="#AnimateMotionPath1"></mpath>
		</animateMotion>
	</path>
	<g transform="translate(0 20)">
		<use xlink:href="#AnimateMotionG"></use>
		<path d="M 0 0 L -1 1 L 2 0 L -1 -1  z">
			<animateMotion dur="3s" rotate="auto-reverse" repeatCount="indefinite">
				<mpath xlink:href="#AnimateMotionPath1"></mpath>
			</animateMotion>
		</path>
	</g>
</svg>

上面的代码将使用曲线当做目标元素的运动轨迹，并且让图形自动跟随路径旋转。效果如下：

mpath

mpath 组件用于指定一个 path 元素作为 animateMotion 动画的路径。mpath 使用 xlink:href 属性引用其他路径。

示例：

<path d="M 0 0 L -1 1 L 2 0 L -1 -1  z">
	<animateMotion dur="3s" rotate="auto-reverse" repeatCount="indefinite">
		<mpath xlink:href="#AnimateMotionPath1"></mpath>
	</animateMotion>
</path>

animateTransform

animateTransform 专门设置 transform 属性的动画效果，它可以使用所有动画属性。

该元素的 attributeName 一般都会设置为 "transform"。

它有一个特有属性 type 用来指定作用的变换是哪一种。

  • type = “translate | scale | rotate | skewX | skewY”

    通过指定上述值决定变换的方式，默认值为 translate。

  • from-to、by、values

    这几个取值属性取决于 type 选择的变换方式，比如 type="translate"，那么 values 的每项和 from-to、by 就是 translate 的参数。

animateTransform 实际上更加复杂，实际参看 19.2.16 The ‘animateTransform’ element。

示例：

<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>

效果如下：

参考

关于此文档