svg动画之 animateTransform（一）

马黑黑 · 发表于 2023-11-21 07:40

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

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

x

svg动画之 animateTransform（一）

animateTransform，从动画名称我们就可以看出，这是一个基于基础变形 transform 的动画。transform 也称转换、形变等，其功能是令对象旋转（rotate）、移位（translate）、缩放（scale）和倾斜（skewX/Y）。虽然 animate 动画元素可以通过改变运动对象的属性达成动画效果，却不能对 transform 转换做任何工作，因为这个工位专由 animateTransform 动画元素负责。

之前介绍 animate 动画时我们讲到的绝大多数动画属性同样适用于 animateTransform，不过 animateTransform 需要一个额外的属性 type，用以指明 transform 的变形种类是 rotate、translate、scale 和 skewX/Y 中的哪一个，例如：

	type="translate"

我们先来看看由 animateTransform 驱动的动画效果，请将鼠标指针移至下方图形：

代码：

<svg style="border: 1px solid tan">
	<g id="g1" transform="rotate(15,60 60)">
		<circle cx="60" cy="60" r="8" transform="translate(60,0) scale(6,1) translate(-60,0)" fill="olive" />
		<circle cx="60" cy="60" r="8" transform="translate(0,60) scale(1,6) translate(0,-60)" fill="olive" />
		<circle cx="60" cy="60" r="10" fill="tan" />
	</g>
	<animateTransform
		xlink:href="#g1"
		attributeName="transform"
		type="rotate"
		from="15,60 60"
		to="375, 60 60"
		dur="3s"
		begin="mouseover"
		restart="whenNotActive"
	/>
</svg>

代码解析：首先，我们绘制了三个圆心坐标一致的小圆，前两个小圆在原地分别沿水平和竖直方向放大六倍，并将这三个小圆放到 g 标签里面构成一个小组，g 标签拥有id标识，在原地旋转15度。接着，我们请出 animateTransform 动画元素，它与 g 标签并列，所以通过 xlink:href 属性指明作用对象为 id="g1" 的 g 标签；动画诸多属性中，与之前介绍的 animate 属性绝大多数完全一样，就多一个 type 属性，如前已述，它用来描述 transform 的动画类型。

当然，这里还有需要注意的地方：一是 g 标签带组问题。g 标签之内的元素作为一个整体由 g 带领，我们的 animateTransform 动画针对的是 g 元素，换言之，动画仅驱动 g 运动，g 标签内的元素因 g 的运动而运动；其二，就是转动（rotate）的衔接问题。上例，g 标签自身转动了15度，如果希望 g 小组转一圈，则 to 的属性值应为 15+360=375 度；其三，例中 begin 属性的 mouseover 值，和 click 一样，属于 SMIL 设计中对 JS 的借鉴，容易理解和记忆。

下面再看一个移位转换示例，type="translate"，单击小圆运行动画：

代码和解释：

<svg style="width: 300px; height: 150px; border: 1px solid gray;">
	<circle cx="30" cy="30" r="30" fill="tan">
		<animateTransform
			attributeName="transform" <-- 指定transform为运动属性 -->
			type="translate" <-- 指明transform类型为translate -->
			values="0,0; 240,90; 0,0" <-- 运动轨迹 -->
			dur="3s" <-- 周期运动时长 -->
			begin="click" <-- 设定单击为动画触发事件 -->
			restart="whenNotActive" <-- 定义重启动画方式 ：非活动时可以重启 -->
			fill="freeze" <-- 定义动画结束时的状态 ：保持最后的姿势 -->
		/>
	</circle>
</svg>

再重点解释一下 values 属性的设计：translate是将运动对象进行位移，它支持{x,y}同时移动，写成 translate(x,y)。例中的 values 属性值共三组：第一组 {0,0}，小圆元素位移从起点开始，出发点坐标实际上就是小圆所占矩形区域的左上角XY坐标而不是圆心坐标 {cx,cy}；第二组 {240,90}，在svg的右下角，值参考的也是小圆所占矩形区域的左上角XY坐标，不是圆心。为什么是240和90呢？拿svg的宽高减去圆的直径就可以明白了；第三组 {0,0}，位移到原位。所以，这个 values 属性值的设计，就是让圆从左上角出发，到右下角后再位移到左上角的路线。

阅读至此，应该感受到，animateTransform 动画元素（标签）其实并不复杂，但要掌握它需要有个前提：要弄清svg中基础变形和svg动画相关的基本知识。知识需要前后关联，完好的认知体系就能相对完整地建立起来。