, 2014年4月1日

D3.jsのtransitionを使うと、要素のアニメーションがとても簡単に実装できます。その際、アニメーションの様子を制御する「イージング」というものを設定する事ができます。

デフォルトで用意されているイージングの種類は色々あるのですが、説明だけだとよく分かりません。ということで、今回はD3のイージングを確認できるものを作りました。

イージングチェッカー!!

名前はそのまま「イージングチェッカー」です。以下のサイトで試してみて下さい。

D3.js Easing Checker

使い方は簡単。丸いのをクリックすると、アニメーションが開始します。elasticやback、bounceなどのアニメーションが分かりやすいですね。

動作確認はChrome, Firefox, Safariで行っていますが、動かなかったらゴメンナサイm(_ _)m

解説

イージング効果は、デフォルトで10個用意されています。

  • linear – 等速
  • poly(k) – k次関数
  • quad – 2次関数
  • cubic – 3次関数
  • sin – 三角関数
  • exp – 指数関数
  • circle – 1円周の4分の1(つまり、扇型の関数)
  • elastic – ゴムっぽい動き
  • back – 最初だけ少しバックする
  • bounce – バウンドする

詳しくは公式リファレンスで解説されているので、軽く確認してみてください。

今回はそのままのイージング効果を使っていますが、実はinやoutを付与するとより複雑な動きを設定できます。例えば”cubic-in-out”を与えると「ゆっくり・早い・ゆっくり」という動き、”bounce-out”を与えると「最初にバウンドしてから抜けていく」という動きになります。

まとめ

elasticやbounceの動きは面白いですが、基本的にはデフォルトのイージングやlinearを使うのがオススメです。

アニメーションは楽しいですが、あまり拘り過ぎると本末転倒なので、ほどほどにしておきましょう。

CATEGORIES