svg动画之 animateTransform（二）

马黑黑 · 发表于 2023-11-22 07:43

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

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

x

本节以举例的形式讲讲 animateTransform 的 scale 和 skewX/Y 动画。先看 scale 的例子，小圆自行运动，循环不止。不过它老跑到外面去，要让它乖乖地在原地缩放，请勾选svg下方的复选按钮（取消勾选它会恢复原状）：

设置圆心为scale运动基点

我们已经知道，svg的transform中，除了translate不受基点影响、rotate可以自带基点外，另两个难兄难弟 scale 和 skewX/Y 的形变都没有基点参数设置，要在 animateTransform 动画中令元素以自己的中心坐标为基点运动，需要给运动对象的元素设置CSS属性 transform-origin 参数，同时还需一个与之相配套的 transform-box CSS属性。以下是上例的SVG代码，红色部分是另外添加的内联式CSS代码：

<svg style="width:200px; height:200px; border:1px solid gray; transform-box: fill-box; transform-origin: 50% 50%;">
	<circle id="mycc" cx="100" cy="100" r="20" fill="purple">
		<animateTransform
			attributeName="transform"
			type="scale"
			values="1;5;1"
			dur="3s"
			repeatCount="indefinite"
		/>
	</circle>
</svg>

transform-box 属性默认值为 view-box，就是svg的原始基点即svg左上角的{0,0}，可以设置为 fill-box，表示使用用户坐标系统；用户坐标系统通过 transform-origin 设置基点，值为 50% 50% 即为元素的中心坐标。transform-box 设为 fill-box 且 transform-origin 设为 50% 50% 的方式其实是使用了CSS方法，可以像上面的代码用 style 嵌入，也可以单独使用CSS设置它：

#mycc {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

/* 恢复svg初始的基点状态
transform-box: view-box;
transform-origin: 0 0;
另，JS可以用 id.style.transformBox 和 id.style.transformOrigin 操控
*/

transform-box 属性现在仍处于实验阶段，不过当代主流浏览器都已经完美支持，毕竟svg发展到今天已经在很大程度上向CSS靠拢——很多svg属性直接可以使用CSS来设置，并且，如果撇开这个属性，我们在 animateTransform 动画中很难找到元素以自己中心点坐标为基点、基于 scale 和 skewX/Y 的更为简单的动画方案。所以，相信w3c不会移除这一属性，只会进一步完善它并令其转正。

下面再给出基于 skewX 的运动，同样地，我们也借助JS的帮忙，可以通过CSS设置小圆的圆心为自己运动的基点。下面是运行效果和svg基本代码：

设置圆心为skewX运动基点

代码如下：

<svg style="width:200px;height:200px;border:1px solid gray;">
	<circle id="mycc1" cx="100" cy="100" r="40" fill="purple">
		<animateTransform
			attributeName="transform"
			type="skewX"
			values="0;30;0;-30;0"
			dur="2s"
			repeatCount="indefinite"
		/>
	</circle>
</svg>

你可以将上述代码改为基于 skewY 的运动，拿到 pencil code 运行查看效果。

貌似一切都那么简单，感谢CSS！

马黑黑 · 发表于 2023-11-22 07:51

【小结】

animateTransform 的 scale 和 skewX/Y ，以及上一讲讨论的 rotate，使用svg默认的变换基点（transform-origin）时，运动对象在动画中会产生实际性的位移。很多时候我们对动画的需求是可控的，这种时候，我们可以给变换设计新的基点（但仅限于rotate），也可以通过复杂的机制实现，另外，还可以通过 CSS 的 transform-box 和 transform-origin 配套使用来简洁地实现基于运动对象而不是svg画布的基点设计。

svg动画我们还有一个精彩的内容还没有开始介绍，不过这些天来讲的太多，我们先休整一下，过几天继续。