svg 动画累加属性

简介

动画累加属性 用来设置动画是否基于上个动画最终值或者静止状态进行动画的累加。

比如一个动画是让 width 从 0 到 10，那么动画累加属性可以让该动画在第二个周期变为让 width 从 10 到 20，第三个周期从 20 到 30，依次累加。

动画累加属性适用于 from-to 属性或者 by 属性的累加，对 values 属性不适用。

属性列表

• additive：指定动画是否可以叠加。

• accumulate：指定动画是否可以累积。

additive

additive 用于设置动画是否可以叠加。

它有两个值：

• sum

  指定动画叠加基础值后再播放。该值会让 from-to、values 像 by 属性一样相对初始状态进行计算。

  例如默认 width 为 3，现在设置 from="10" to="20"，那么实际的运动效果 from 为 10 + 3，to 为 20 + 3。from 与 to 会叠加静止状态的值。同理，前面的 from-to 可以使用 values="10;20" 代替。

• replace

  指定动画值替换静止状态。这是默认值，from-to 和 values 会参考目标属性的实际范围进行设置，而不会产生叠加效果。

示例：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="200" height="100" viewBox="0 0 20 10">
	<rect x="0" y="0" width="5" height="5" fill="#f0f">
		<animate attributeName="width" from="10" to="15" dur="1s" repeatCount="indefinite"></animate>
	</rect>
	<rect x="0" y="5" width="5" height="5" fill="#0ff">
		<animate attributeName="width" from="10" to="15" dur="1s" repeatCount="indefinite" additive="sum"></animate>
	</rect>
</svg>

上述代码演示了默认值 replace 与 sum 的差异，第二个矩形在进行动画时，会叠加静止状态的值，所以偏移的首末会多 5 个单位。效果如下：

accumulate

accumulate 用来指定动画是否可以累积。

它有两个值：

• sum

  指定每个动画周期值的终点为下个周期起点。

  比如一个动画是让 width 从 0 到 10，设置该值后动画第二个周期 width 会从 10 开始计算，于是第二个周期会从 10 到 20 进行过渡，第三个会从 20 到 30 过渡 …

  如果是 values 属性同理，使用 values 时，最终状态会作为下个周期的初始状态。

• none

  指定动画是不可以累积，这是个默认值。每次动画将是独立的，不会进行累积。

accumulate 作用于周期之间，而 additive 作用于单个周期，它们可以混用，互不干扰。

示例：

<svg id="Accumulate1" version="1.1" xmlns="http://www.w3.org/2000/svg" width="350" height="100" viewBox="0 0 35 10">
	<rect x="0" y="0" width="5" height="5" fill="#f0f">
		<animate
			attributeName="width"
			begin="Accumulate1.click"
			values="0;5"
			dur="1s"
			repeatCount="5"
			accumulate="sum"
			additive="sum"
		></animate>
	</rect>
	<rect x="0" y="5" width="5" height="5" fill="#0ff">
		<animate
			begin="Accumulate1.click"
			attributeName="width"
			values="0;5"
			dur="1s"
			repeatCount="5"
			accumulate="sum"
		></animate>
	</rect>
</svg>

上面的示例演示了累积配合叠加产生的动画效果，其中帝格尔矩形仅使用了累积，你可以通过点击图形来让动画开始，效果如下：

可以看到，第二个矩形因为没有使用叠加，在开始播放时进行了闪烁。

针对闪烁问题也许你会想，那我设置 values="5;10" 不就可以了，这的确会让第一次播放正常进行，但是累积的效果会让下个周期初始值归零，造成后面的周期动画产生闪烁。

参考

• 19.2.10 Attributes that control whether animations are additive --- W3C

• SVG 属性参考 --- MDN

• SMIL Animation --- W3C