跳至内容

变换插值

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

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)"

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

interpolateTransformSvg(a, b)

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

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