0.7.1バネが伸び縮みするアニメーションは、「単振動」と呼ばれて三角関数で表すのが定石です。バネの端をもって振り回すような動きは、加速度にもとづく式で扱うのが便利です。この式は「オイラー法」という数学の考え方から導かれます。三角関数を使ったバネの動きバネの伸び縮みをアニメーションで見せたいときは、三角関数のsinまたはcosを使うのが定石です。sinとcosは半径1の「単位円」で定義されます。sinθ)と定められています(図001)。sinθ)角度θを等しい速さで増やしてゆくと、sinθとcosθは値がバネの動きのように上下します。横軸を角度、縦軸に三角関数値としたグラフを描くと、sinとcosは波のような曲線を描きます(図002)。ふたつの曲線のかたちは同じで、違うのは始まりの値(角度0)がsinは0でcosは1というタイミング(位相)です。0)を中心とするバネのような上下の動きは、角度θを等しい速さで増やしながら、振れ幅(半径)rにsinθを乗じて垂直座標yに定めればよいことになります(図003)。oscillator」たとえば、つぎのようなJavaScriptコードを書いて、アニメーションのための関数(move())を決まった間隔で呼出せば、オブジェクト(myShape)はバネのように上下します。以下のjsdo.itのサンプル001は、EaselJSでこのコードを用いました。速度を位置に加えたイーズアウトの動き加速度を用いたバネの動きに取りかかる前に、速度を位置に加えるアニメーションについてご説明しておきます。目標の位置に近づくほど速度が遅くなるように、いわゆるイーズアウトさせてみましょう。時間と位置のグラフにすると、つぎの図004のようになります。インターフェイスなどでよく使われる動きです。図004■動きが遅くなりながら目標に近づくオブジェクトのプロパティを目標値に動かすときイーズアウトさせるには、つぎのような式を使います。目標値と現在値との差をとります。これをそのままプロパティに加えれば、その値はただちに目標値になります。そこで、差の値に0から1の間の減速率を乗じます。これを速度としてプロパティに加えればよいのです。速度EaselJSで、上記の式を使ってみましょう。インスタンスにマウスポインタの後を、少し遅れて追いかけさせます。JavaScriptコードには、つぎのようにTicker.tickイベントのリスナー関数(followMouse())を定めます。リスナー関数は、まず目標となるマウスポインタの座標(Stage.mouseX/Stage.mouseYプロパティ)とインスタンスの位置(DisplayObject.x/DisplayObject.yプロパティ)との差に減速率(ease)を乗じて速度(velocityX/velocityY)とします。つぎに、速度をインスタンスの位置座標に加えればイーズアウトのアニメーションです。velocityY;stage.update();}EaselJSを用いたJavaScriptコード全体は、つぎのjsdo.itのサンプル002に掲げました。マウスポインタを動かすと、インスタンスが追いかけ、ポインタに近づくにつれて動きは遅くなります。加速度を速度に加えて表すバネの動きバネの動きも、速度を位置に加えて表します。その速度には加速度が与えられることで、速さを変えます。バネは力の釣合う点(均衡点)から離れるほど、もとの位置に戻ろうとする力が働きます。前項02「速度を位置に加えたイーズアウトの動き」では、目標となるマウスポインタの座標(Stage.mouseX/Stage.mouseYプロパティ)とインスタンスの位置(DisplayObject.x/DisplayObject.yプロパティ)との差に減速率(ease)を乗じて、そのまま速度としました。今回この値は加速度と捉えて、以下のコードのように速度(velocityX/velocityYプロパティ)に加えます。その速度を位置座標に加えて、インスタンスのアニメーションにするのは前項と同じです。速度がそのままでは、バネの伸び縮みがいつまで経っても止まりません。そこで、速度に減衰(摩擦)係数(friction)を乗じることにより、揺れ幅が次第に小さくなって、目標値に落着くようにしました。下図005が、時間を水平軸、位置を垂直軸にしたこの式の変化のグラフです。velocityY;stage.update();}前掲サンプル002を書替えたJavaScriptコード全体は、つぎのjsdo.itのサンプル003のとおりです。マウスポインタを動かすと、インスタンスはそれを追いかけながら、ポインタにバネで結ばれたような伸び縮みの動きをします。前述01「三角関数を使ったバネの動き」が中心(均衡点)から位置を決めたのに対して、現在値と目標値が式の変数に含められるので、このような表現には適しています。サンプル003■マウスポインタを追って伸び縮みするアニメーションさらに、gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」では、つぎの2回にわたって以下のサンプル004のコードを解説しています。速度に加速度、位置に速度を加える前項03「加速度を速度に加えて表すバネの動き」では、加速度に速度を加え、その速度を位置に加えてアニメーションにしました。これは「オイラー法」と呼ばれる考え方で、運動の方程式を近似的に表します。厳密には、時間tに対する位置の関数x(t)を、時間で微分すると速度の関数v(t)が求まります。速度を時間で微分すると、加速度の関数a(t)が導かれるのです。関数x(t)の時間tによる微分(導関数)は、つぎの式の右辺のように経過時間Δtを0にするときの極限として表されます。極限を求める前のつぎの式も、Δtが充分に小さければ近似として使えます。記号「≃」は「ほぼ等しい」ことを示します(日本で用いる「≒」は、国際的にはあまり使われないようです)。Δt)がつぎの式で求められることになります。現在の位置x(t)に、そのときの速度v(t)と経過時間Δtの積を加えればよいのです。これがオイラー法の考え方です。Δtの単位は小さければ構いません。そこで、アニメーションで扱いやすいように時間の単位を1フレームとし、フレームあたりの速度で考えれば、速度と経過時間の掛け算は要りません(×1フレームになるので)。加速度についても同じように式が導けます。オブジェクトの動きを表すスクリプトの式はつぎのようにすればよいのです。前述03「加速度を速度に加えて表すバネの動き」では、このオイラー法の考え方で、加速度から位置のアニメーションを定めました。オイラー法をそれと知らずに、すでに使っている人は少なくないでしょう。オブジェクトが落ちるとき、重力が加速度になります。すると、オイラー法から、フレームごとのオブジェクトの位置がつぎのように求められます。重力は一定ですので、速度には定数を加えることになります。定数で増した速度をオブジェクトの位置に加えて自由落下のアニメーションにしたことがあれば、オイラー法を使っていたということです。gihyo.jp連載第24回へのリンクを追加。03「加速度を速度に加えて表すバネの動き」にgihyo.jp連載の情報とサンプル004を追加。