svg动画之 animate（二）

马黑黑 · 发表于 2023-11-20 07:55

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-11-20 08:04 编辑

svg动画之 animate（二）

本节继续讲 animate 动画，不过主要是基于应用层面，期间会涉及到上节没提到的动画属性——这里不可能讲完所有的属性，只谈谈那些我们不得不用到的，更多的内容日后有机会再慢慢扩展也不迟。本节所要谈的内容，对后续将介绍的其它两个动画也是基础，所以建议能够消化。

让我们从一个有趣的例子开始，可以单击橄榄色矩形开始动画，查看它的运行状况：

永动 begin="click; toTop.end"

实现上面的动画效果，我们设计了四个animate动画元素，每一个动画都有id标识，除第一个动画手动触发外，余下三个动画均在上一个动画结束时运行。以下是完整代码：

<svg width="300" height="180" style="border: 1px solid;">
	<rect x="5" y="5" width="50" height="50" fill="olive">
		<animate
			id="toRight"
			attributeName="x"
			to="245"
			dur="2s"
			begin="click"
			restart="whenNotActive"
			fill="freeze";
		/>
		<animate
			id="toBottom"
			attributeName="y"
			to="125"
			dur="2s"
			begin="toRight.end"
			fill="freeze";
		/>
		<animate
			id="toLeft"
			attributeName="x"
			to="5"
			dur="2s"
			begin="toBottom.end"
			fill="freeze";
		/>
		<animate
			id="toTop"
			attributeName="y"
			to="5"
			dur="2s"
			begin="toLeft.end"
			fill="freeze";
		/>
	</rect>
</svg>

代码虽多，了解了各个动画的异同，一切就可以了然于胸。id是animate元素的唯一标识，它们自然各不相同；要改变的矩形的属性名（attributeName），水平方向是 x，竖直方向是 y；移动到（to）当然不同；运行周期时长（dur）一样，也可以根据需要设置为不同；begin是动画的触发时间或方式，第一个animate依靠手动点击触发，后三个等到前一个动画结束时触发，用 begin="id.end" 表示，id.end 意为 id 动画结束，id指的是animate动画元素的id名称；只有第一个动画设置了 restart 属性，原因好理解，动画由它来触发，然后第二个动画接过接力棒，完了继续往后传；每一个动画都设置 fill="freeze"，令每一个动画结束时都停留在结束时的状态，这是动画衔接运行的关键，否则会乱套，因为fill默认回到动画开始时的状态。顺便提一下，animate标签的代码可以做一行写。

如果想让动画永远运行下去，怎么做？其实也简单：第一个即 id="toRight" 的动画，begin 属性改造为

 begin="click; toTop.end"

便可，其意为，单击以及 toTop 动画结束时开始本动画。和 values 属性一样，begin 以相同的表达形式提供多种触发动画的条件。可以勾选示例下方的“永动”复选按钮查看效果。

动画的封装方式不仅仅是将动画标签嵌入运动对象的标签里面，它们还可以以 xlink:href="#id" 的方式作用于运动对象，此时，animate 标签可以写在运动对象标签之外，通过实体元素的 id 标识令其运动。试看如下代码：

<svg width="300" height="300" style="border: 1px solid gray">
	<circle id="cc" cx="150" cy="150" r="20" fill="olive" />
	<animate
		xlink:href="#cc"
		id="bigger"
		attributeName="r"
		values="20; 100; 100; 20"
		begin="click"
		dur="4s"
		repeatCount="indefinite"
	/>
	<animate
		xlink:href="#cc"
		attributeName="cx"
		values="150; 200; 100; 150"
		begin="bigger.begin + 2s";
		dur="4s"
		repeatCount="indefinite"
	/>
</svg>

上述代码，两个 animate 动画标签与 circle 标签是并列关系，circle 有id标识，id="cc"，两个 animate 标签均使用 xlink:href="#cc" 指向circle标签。第一个animate改变圆的半径，手动单击触发动画，第二个animate改变圆心x坐标 cx，触发方式是行为+时间，即 id="bigger" 的第一个动画开始运行两秒之后它接着运行。以下是效果演示，单击小球启动（恢复）动画，双击svg暂停动画：

【小结】本节是第一节的扩展，通过应用实例，总共介绍两个重要的知识点：一是svg动画的复合触发方式，begin="值1; 值2; ..." 这样的设定可以令运动对象接收多个触发指令。begin 属性值还可以纳入计算：上一个动画运行多久再运行下一个动画（参考示例二的第二个animate动画的begin属性设计[代码16行]）；二是动画元素与实体运动元素代码分离，要求实体运动元素带有id标识，animate动画元素通过 xlink:href="#id" 的属性设计将动画指向作用目标。通过应用实例，我们还引入了动画的 end 属性值，使用 id.end 的方式表示该动画的结束时间点（参考示例一代码17行）。