JavaScriptでCSSアニメーションを自在に制御可能なライブラリ「Dynamics.js」を試してみた！

公開日：2015/06/16

「CSSでアニメーションは難しい！」とか、「JavaScriptで全部制御したい！」…という人にはオススメのライブラリ「Dynamics.js」のご紹介！

コードが非常にシンプルで扱いやすいのが特徴で、単純なWebサイトへ簡単に動きを付けられるようになります。

使い方！

まずは、Downloadページから最新版の「Dynamics.js」をダウンロードしましょう。

2015年6月現在の最新版は「0.0.3」となっています。(恐らく今後も活発にバージョンアップされていくと思います…)

　
あとは、HTMLコード内でDynamics.jsを読み込めば、準備OKです！

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dynamics Sample</title>
    <script src="dynamics.js"></script>
  </head>
  <body>
  </body>
</html>

アニメーションの制御方法！

実際に、Dynamics.jsを使って「CSSアニメーション」を制御する方法ですが、ざっくり言ってしまうと、以下の構文を覚えるだけで使えてしまいます！

dynamics.animate(el, property, option);

-【el】
DOMエレメントのことで、CSSでスタイリングするように要素を指定します。

-【property】
移動、回転、拡大など、どんなアニメーションをさせたいかを指定します。

-【option】
アニメーションの種類や持続時間、周期、摩擦力など、細かい微調整をします。

　
ひとまず、これだけ覚えておけば手軽にアニメーションが実現できるのは魅力的です。

実際に作ってみよう！

　
例えば、以下のように「div」要素で作った黒色の四角があったとします。

index.html

1
2
3

<body>
  <div id="box"></div>
</body>

style.css

#box {
  width: 60px;
  height: 60px;
  background-color: black;
}

　
この状態で、先ほどの構文に当てはめながらjavaScriptを書くと、以下のようになるでしょう。

main.js

1
2
3

var el = document.getElementById('box');
 
dynamics.animate(el, property, option);

「div」要素のboxを「el」として設定しました。

あとは、「property」と「option」を指定すれば、「div」要素のboxはアニメーションしてくれるわけです。

　
今回は、左右にバウンドするようなアニメーションを指定したいと思います。

そこで、「property」に横移動を設定し、「option」にバウンドするアニメーションを指定したのが以下のスクリプトになります。

main.js

var el = document.getElementById('box');
var property = {
    translateX: 400
}
var option = {
    type: dynamics.bounce,
    frequency: 600,
    friction: 400,
    duration: 2500
}
 
dynamics.animate(el, property, option);

どんなオプションのパラメータが指定できるのかは、「Dynamics.js」の公式サイトで実際に試せるようになっているので便利です。

上記サンプルに、スタートボタンを追加したのがコチラ！
（ボタンをクリックすると、アニメーションします）

See the Pen QbMOGz by webStudy (@webstudy) on CodePen.

まとめ

「Dynamics.js」は、単純にパラメータを指定するだけなので、プログラミングというよりも「ジェネレーターアプリ」に近いかもしれません。

使い方はすぐに覚えられるので、既存のサイトやブログに面白いアニメーションをぜひ実装してみてください。

ちなみに、公式サイトにも掲載されていますが、SVGをアニメーションさせることも可能です。

See the Pen Sample for Dynamics.js by webStudy (@webstudy) on CodePen.

ちょっとしたアクセントには最適ではないでしょうか。

　
注意点としては、あまり古いブラウザには対応していないところ…。
（推奨されているのは、Safari 7+, Firefox 35+, Chrome 34+, IE10+となっています）

（参考）
「Dynamics.js」公式サイト

うえぶまなぶ