時間→座標の補間関数を工夫する 前項のサンプルは 単に時間の経過に合わせ直線的に値を増減させるものでした。 物理的な運動ではいきなり特定の速度に達することは無く加減速のステップがあります。 くるまが停止状態からスピードを上げ 目的地に近くなったらスピードを落とすように レイヤーの移動を工夫してみましょう。

補間用関数「hokan()」に渡す 関数「f(t)」と区間「ts,te」を変えることによって 動作をカスタマイズできます。

まず上の例を実行して見ましょう。 最初の例は加減速無しで普通に等速運動するものです。 補間の設定は関数「z=t」を区間「-1〜+1」で使っています。 タイマー機能を簡単に利用：kl_timer_...() を使い移動関数「move()」を30msec毎に100回呼び出しています。

function f(t){ return t; } x0=kl_slx()+10; y0=kl_sly()+10; kl_timer_start(move,new Array("lay1",x0,y0,x0+400,y0+400,f,-1,1),30,100);

次は工学でお馴染み？の「z=(e(t)-1)/(e(t)+1)」を使ってみます。 原点対象(z(-t)=-z(t))、t→無限大で１に漸近、t→無限小で-1に漸近という特徴があります。

function f(t){ return (Math.exp(t)-1)/(Math.exp(t)+1); } x0=kl_slx()+10; y0=kl_sly()+10; kl_timer_start(move,new Array("lay1",x0,y0,x0+400,y0+400,f,-1,1),30,100);

あまり加減速しませんね。 区間を広げて[-10:10]にしてみましょう。

function f(t){ return (Math.exp(t)-1)/(Math.exp(t)+1); } x0=kl_slx()+10; y0=kl_sly()+10; kl_timer_start(move,new Array("lay1",x0,y0,x0+400,y0+400,f,-10,10),30,100);

いい感じですね。 今度は区間を[-30:10]にして非対称で利用してみましょう。

function f(t){ return (Math.exp(t)-1)/(Math.exp(t)+1); } x0=kl_slx()+10; y0=kl_sly()+10; kl_timer_start(move,new Array("lay1",x0,y0,x0+400,y0+400,f,-30,10),30,100);

逆に[0:20]にしてみます。始めは速く 目的地に近くなったら遅くなります。

function f(t){ return (Math.exp(t)-1)/(Math.exp(t)+1); } x0=kl_slx()+10; y0=kl_sly()+10; kl_timer_start(move,new Array("lay1",x0,y0,x0+400,y0+400,f,0,20),30,100);

今度は「sin」関数の例です。

function f(t){ return Math.sin(Math.PI*t/2.0); } x0=kl_slx()+10; y0=kl_sly()+10; kl_timer_start(move,new Array("lay1",x0,y0,x0+400,y0+400,f,-1,1),30,100);

これだけでは あまり加減速しないので ３階の合成関数にしてみましょう。

function f0(t){ return Math.sin(Math.PI*t/2.0); } function f(t){ return f0(f0(f0(t))); } x0=kl_slx()+10; y0=kl_sly()+10; kl_timer_start(move,new Array("lay1",x0,y0,x0+400,y0+400,f,-1,1),30,100);

随分変わりましたね。 今度は「t**0.3」(0.3乗)にしてみましょう。

function f(t){ return (t>0 ? Math.pow(t,0.3) : -Math.pow(-t,0.3)); } x0=kl_slx()+10; y0=kl_sly()+10; kl_timer_start(move,new Array("lay1",x0,y0,x0+400,y0+400,f,-1,1),30,100);

今度は 上の関数の逆関数を利用して パスの真ん中で速度が落ちるようにしてみましょう。

function f(t){ return t*t*t; } x0=kl_slx()+10; y0=kl_sly()+10; kl_timer_start(move,new Array("lay1",x0,y0,x0+400,y0+400,f,-1,1),30,100);

今度は5乗に。

function f(t){ return t*t*t*t*t; } x0=kl_slx()+10; y0=kl_sly()+10; kl_timer_start(move,new Array("lay1",x0,y0,x0+400,y0+400,f,-1,1),30,100);

これまで見てきたように「hokan()」に渡す関数「f(t)」とその利用区間「ts,te」を 変えることによって移動アニメーションをカスタマイズできます。

３つ以上の通過点を指定したい さて、これまでの例は単に開始点・終了点の2点間を直線的に移動するものでした。 一方、3点以上の通過点を用意して それらを 滑らかに通過したい場合もあるでしょう。 その場合は BezierやNurbsなどスプライン系の関数で軌道を計算します。

曲線パラメータを線長にすればこれまでの アニメーションの工夫がそのまま使えます。 興味がある人は調べてみて下さい。