D3.js v4/v5 アニメ―ション使い方 エフェクト一覧(transition, ease)

2018-03-13

D3のアニメーション用API、transitionと一緒に用いるeaseを紹介します。D3でのアニメーションの設定は下記です。

この設定では、選択した”circle”がcx=500の位置に750ミリ秒かけて移動します。D3のメソッドeaseを用いるとエフェクトを変更することができます。

d3.easeBounceInOutはエフェクトを変化させるための関数で、次の種類が用意されています。サンプルとしてcircleに時間変化のアニメーションを、グラフに時間と変化量の関係を表示します。

関数一覧

d3.easeLinear

d3.easePolyIn

d3.easePolyOut

d3.easePoly, d3.easePolyInOut

d3.easePolyとd3.easePolyInOutは同じ関数です。どちらかを用います。また、d3.easePolyIn、d3.easePolyOut、d3.easePoly、d3.easePolyInOutは

のように、exponentメソッドを使って曲がり具合を変更できます。デフォルトは3で1の場合は直線になります。

d3.easeQuadIn

d3.easeQuadOut

d3.easeQuad, d3.easeQuadInOut

d3.easeCubicIn

d3.easeCubicOut

d3.easeCubic, d3.easeCubicInOut

d3.easeSinIn

d3.easeSinOut

d3.easeSin, d3.easeSinInOut

d3.easeExpIn

d3.easeExpOut

d3.easeExp, d3.easeExpInOut

d3.easeCircleIn

d3.easeCircleOut

d3.easeCircle, d3.easeCircleInOut

d3.easeElasticIn

d3.easeElastic, d3.easeElasticOut

d3.easeElasticInOut

d3.easeElasticIn、d3.easeElastic、d3.easeElasticOut、d3.easeElasticInOutは

のようにamplitudeメソッドを使って振幅を、periodメソッドを使って周期を変更できます。デフォルトは1と0.3です。

d3.easeBackIn

d3.easeBackOut

d3.easeBack, d3.easeBackInOut

d3.easeBackIn、d3.easeBackOut、d3.easeBack、d3.easeBackInOutは

のようにovershootメソッドを使ってオーバーシュート量を変更できます。デフォルトは1.70158です。

d3.easeBounceIn

d3.easeBounce, d3.easeBounceOut

d3.easeBounceInOut

まとめ

transitionは

のように複数を続けて呼び出すこともできます。組み合わせれば様々なアニメーションが可能です。