如何通过简单的例子理解`d3-interpolate`中的'interpolateTransformCss`，`interpolateTransformSvg`？

Question

我正在研究source code的d3-interpolate。我可以模糊地遵循interpolateTransformCss和interpolateTransformSvg的文档和src。

然而，鉴于CSS的基本知识和对SVG的了解不多，我无法弄清楚这两个函数在没有某些测试示例的帮助下究竟会产生什么（d3-interpolate repo没有提供这两个测试示例功能）。

有没有人能提供一些简单的例子来证明这两个函数是如何工作的，以及他们试图在行动中实现什么，比如在blockbuilder.org中显示的示例代码？

由于

Answer 1

简而言之，affine transformation matrix不适合于有意义的过渡（从状态A到状态B的插值）。

假设我们有初始身份转换矩阵，我们需要转换为旋转的矩阵：

动画旋转意味着您需要为角色设置动画，而不是分别为矩阵的每个组件设置动画。所以矩阵过渡的正确方法是decompose it to four basic operations：平移，旋转，剪切和缩放。通过这些独立的变换，您可以独立且有意义地对它们进行变形，并将它们（乘法）组合成最终的单个变换矩阵。

似乎d3代码而非最终matrix()只会生成rotate()，translate()等操作列表。

检查：https://www.w3.org/TR/css-transforms-1/#interpolation-of-2d-matrices

Answer 2

SVG元素可以采用transform属性。它可能看起来像这样：

<circle transfrom="translate(20, 10) rotate(30)" r="10" />

这意味着“将圆圈移动到x = 20 y = 10并将其旋转30度”。

插补器有助于过渡。因此，如果您将该圆转换为新位置和旋转，例如

<circle transfrom="translate(30, 20) rotate(40)" r="10" />

然后需要插补器。 d3过渡会自动执行此操作，但内插器对象会显示，以便您根据需要进行自己的插值。因此，为该圆创建插值器可能如下所示：

var myInterpolator = d3.interpolateTransformSvg(
  "translate(20, 10) rotate(30)",
  "translate(30, 20) rotate(40)"
)

d3插值器将检测到它需要插入3个数字：20,10和30.基于此，这是你得到的：

myInterpolator(0);   // returns "translate(20, 10) rotate(30)"
myInterpolator(1);   // returns "translate(30, 20) rotate(40)"
myInterpolator(0.5); // returns "translate(25, 11) rotate(35)"

即。最后一个示例在0和1之间中途返回适当的变换（0.5）。

d3.interpolateTransformCss使用CSS变换做同样的事情，它与SVG变换的目的相同，但是通过style应用于非SVG元素并且格式略有不同。