D3

变换插值 ​

🌐 Transform interpolation

用于 CSS 和 SVG 变换的插值器。插值方法已由 CSS 标准化：参见 动画的矩阵分解。

🌐 Interpolators for CSS and SVG transforms. The interpolation method is standardized by CSS: see matrix decomposition for animation.

interpolateTransformCss(a, b) ​

js
d3.interpolateTransformCss("translateY(12px) scale(2)", "translateX(30px) rotate(5deg)")(0.5) // "translate(15px,6px) rotate(2.5deg) scale(1.5,1.5)"

示例 · 来源 · 返回一个在由 a 和 b 表示的两个 2D CSS 变换之间进行插值的插值器。每个变换被分解为平移、旋转、x 倾斜和缩放的标准表示；然后这些组件变换被插值。

interpolateTransformSvg(a, b) ​

js
d3.interpolateTransformSvg("skewX(-60)", "skewX(60) translate(280,0)") // "translate(140,0) skewX(0)"

示例 · 来源 · 返回一个在由 a 和 b 表示的两个二维 SVG 变换之间的插值器。每个变换都会被分解为平移、旋转、x 倾斜和缩放的标准表示；然后对这些组件变换进行插值。