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

1

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

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


使い方!

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

2

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

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

index.html
1
2
3
4
5
6
7
8
9
10
<!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
1
2
3
4
5
#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
1
2
3
4
5
6
7
8
9
10
11
12
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」公式サイト


最新情報をチェック!

一緒によく読まれている記事

キーワード Keyword