css - 计算平移过程中旋转的 SVG 动画的 CSS 变换矩阵

Question

正方形应设置动画以旋转，同时沿直线从红色正方形移动到蓝色正方形。我无法让它工作，因为您可以从移动方 block 与固定蓝色方 block 不匹配中看到。

这个问题反复出现，因此我需要一个可重用的解决方案。也就是说:不仅要给出矩阵的具体数字，还要给出得出这些值的计算方法。

所以我需要根据以下变量进行 matrix() 转换:

• x1,y1 是直线运动路径的初始点(在下面的示例中75,75)；
• x2,y2 是直线移动路径的终点(在下面的示例中175,75)；
• cx,cy 是旋转中心(在下面的示例中75,75)；
• a 作为旋转 Angular (在下面的示例中 45deg - 我更喜欢以弧度给出值，但 CSS 似乎不接受这一点)；

使得对象围绕cx,cy旋转 Angular a，同时点x1,y1移动到x2,y2 沿直线(请注意，虽然 x1,y1 和 cx,cy 在下面的示例中重合，但情况并非总是如此，但该示例假设简单地说)。

请注意，我确实知道矩阵是如何工作的，包括如何组合变换。问题是我不知道这个特定问题需要哪些特定转换。

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<svg xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	width="250px" height="150px" viewBox="0 0 250 150">
	<style>
	*{stroke:black;stroke-width:1px;}

	@keyframes ani {
		0% {fill:#f00;transform:translate(0, 0 );}
		/* illustrating that movement works without rotation. */
		25% {fill:#00f;transform: translate( 100px, 0 );}
		50% {fill:#f00;transform:translate(0, 0 );}
		/* with rotation it ends up anywhere but where it is supposed to go. */
		75% {fill:#00f;transform: translate( 100px, 0 ) translate( 175px, 75px) rotate( 45deg ) translate( -175px, -75px );}
		100% {fill:#f00;transform:translate(0, 0 );}
	}
	#p {animation: ani 4000ms ease-in-out 10ms infinite normal forwards;}
	</style>

	<defs>
		<path id="def" d="m0,0 l50,0 l0,50 l-50,0 l0,-50" />
	</defs>

	<use xlink:href="#def" x="50" y="50" style="fill:#faa;" />
	<use xlink:href="#def" x="150" y="50" style="fill:#aaf;" transform="rotate( 45 175 75 )" />
	
	<use id="p" xlink:href="#def" x="50" y="50" />
</svg>

Answer 1

我相信你想要的矩阵基本上是这样的(感谢 this page 帮助我弄清楚):

transform: matrix(cos(angle),sin(angle),-sin(angle),cos(angle),translateDiffX,translateDiffY);

我认为你不能在 CSS 中设置三 Angular 值(除非使用预处理器)，所以我做了 this fiddle 其中 CSS 通过 JavaScript 被覆盖(尽管以某种严厉的方式)，并更改了 Angular 和平移值进行测试以确保它适用于其他情况。

请注意，如果没有 0% 和 100% 处的 transform-origin，动画就会有一种弧线效果(尽管这可能是可取的/不重要的)。