[JS]物理法則に基づいたさまざまなアニメーションを実装できるスクリプト -Dynamics.js
Post on:2015年6月30日
sponsorsr
反発係数を使って弾み具合を変化させたり、運動量に応じて質量を変化させたり、引っ張ると引っ張り返され押すと押し返されるなど、物理法則に基づいた滑らかなさまざまなアニメーションを実装できるスクリプトを紹介します。
Dynamics.js
Dynamics.js -GitHub
Dynamics.jsのデモ
デモでは、物理法則に基づいたさまざまなアニメーションを楽しめます。
いくつかアニメーションGIFにしてみました。
ローダーで使用しているボールは落下した後、反発係数を元にバウンドの高さが少しずつ小さくなります。
メニューが開いた時、その運動量に応じて質量を変化させています。
SVGで作成したボタンにもアニメーションを適用できます。
物理法則に基づいたさまざまな動きは、ブルーのプルダウンからいろいろ試すこともできます。
Dynamics.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
[html]
...
コンテンツ
...
[/html]
Step 2: JavaScript
適用するエレメントを指定し、アニメーションを設定します。
elは要素、el内のプロパティはアニメーションさせるプロパティと値、typeはアニメーションの種類、frequency, frictionはアニメーションの細かい設定、durationはタイミングです。
[javascript]
var el = document.getElementById("logo")
dynamics.animate(el, {
translateX: 350,
scale: 2,
opacity: 0.5
}, {
type: dynamics.spring,
frequency: 200,
friction: 200,
duration: 1500
})
[/javascript]
SVGの実装例です。
[javascript]
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
})
[/javascript]
sponsors
