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 轴倾斜和缩放的标准表示；然后，对这些组件转换进行插值。

¥Examples · Source · Returns an interpolator between the two 2D CSS transforms represented by a and b. Each transform is decomposed to a standard representation of translate, rotate, x-skew and scale; these component transformations are then interpolated.

interpolateTransformSvg(a, b) ​

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

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

¥Examples · Source · Returns an interpolator between the two 2D SVG transforms represented by a and b. Each transform is decomposed to a standard representation of translate, rotate, x-skew and scale; these component transformations are then interpolated.