[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js

サイト構築 -JavaScript

Post on:2015年6月30日

sponsorsr

反発係数を使って弾み具合を変化させたり、運動量に応じて質量を変化させたり、引っ張ると引っ張り返され押すと押し返されるなど、物理法則に基づいた滑らかなさまざまなアニメーションを実装できるスクリプトを紹介します。

Dynamics.js
Dynamics.js -GitHub

Dynamics.jsのデモ
Dynamics.jsの使い方

Dynamics.jsのデモ

デモでは、物理法則に基づいたさまざまなアニメーションを楽しめます。

デモページ

いくつかアニメーションGIFにしてみました。

demo: Loader

ローダーで使用しているボールは落下した後、反発係数を元にバウンドの高さが少しずつ小さくなります。

demo: Menu

メニューが開いた時、その運動量に応じて質量を変化させています。

demo: SVG

SVGで作成したボタンにもアニメーションを適用できます。

デモページ

物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。

Dynamics.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="dynamics.js"></script>
</body>

Step 2: JavaScript

適用するエレメントを指定し、アニメーションを設定します。
elは要素、el内のプロパティはアニメーションさせるプロパティと値、typeはアニメーションの種類、frequency, frictionはアニメーションの細かい設定、durationはタイミングです。

var el = document.getElementById("logo")
dynamics.animate(el, {
  translateX: 350,
  scale: 2,
  opacity: 0.5
}, {
  type: dynamics.spring,
  frequency: 200,
  friction: 200,
  duration: 1500
})

SVGの実装例です。

var path = document.querySelector("path")
dynamics.animate(path, {
  d: "M0,0 L0,100 L100,50 L0,0 Z",
  fill: "#FF0000",
  rotateZ: 45,
  // rotateCX and rotateCY are the center of the rotation
  rotateCX: 100,
  rotateCY: 100
}, {
  friction: 800
})