コンテンツへスキップ

変換補間

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で表される2つの2D CSS変換間の補間器を返します。各変換は、平行移動、回転、x方向のスキュー、スケールの標準表現に分解され、これらのコンポーネント変換が補間されます。

interpolateTransformSvg(a, b)

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

· ソースコード · abで表される2つの2D SVG変換間の補間器を返します。各変換は、平行移動、回転、x方向のスキュー、スケールの標準表現に分解され、これらのコンポーネント変換が補間されます。