モーション あれこれ その３

前回の予告通り、n次関数を使っても、イージング効果を付加した式が作れる事を見てみたい。ご覧の通り、この視点では、緩やかに動き出すようにはとても見えない。しかし、xの範囲を0以上1未満に限定してみると、ご覧の通り緩やかに動き出す式を作れそうに見える。次数をあげる程、ゆっくりと動き出すのだ。
これを、物体の初期座標をp0、t秒後の座標をp(t)とする。そして、物体は、t1秒後にp1の位置で停止するものとした、記号で式を書き直すと、となる。これをグラフにするととなる。
赤い線がn=2で、黄色い線がn=3のときのものである。参考までに、等速運動と単振動を合成した場合のグラフ（青い線）も載せておいた。ただし、このままで始点でのイージング効果しかえられない。

ひっくり返せば、終点でだけのイージング効果が得られる。その式は、となる。これをグラフにするととなる。
赤い線がn=2で、黄色い線がn=3のときのものである。参考までに、等速運動と単振動を合成した場合のグラフ（青い線）も載せておいた。

では、次回、n次関数を使って両端でイージング効果を得る式を考察してみる。

モーション あれこれ その２

前回は、単振動のイージング効果を出せる数式を見てみた。今回は、以前このブログでも考察した等速運動と単振動をあわせたイージング効果を出せる式を紹介する。

前回と同じ記号、すなわち、物体の初期座標をp0、t秒後の座標をp(t)とする。そして、物体は、t1秒後にp1の位置で停止するものとする。

等速運動と単振動をあわせた式は、となる。ここで、単振動の振幅は、始点および終点を超えない範囲で最大のものを選んである。時間と移動距離のグラフは、となる(赤い線)。比較のために、単振動のグラフも載せてある（青い線）。始点と終点でのグラフの傾きから、等速運動と単振動をあわせた今回の式の方が、より大きなイージング効果が出ている事がわかる。

ところで、次のようなn次関数を使ってもイージング効果を得る事ができる。一見すると、位置として扱う縦軸の値が急激に大きくなりすぎるようで、さらに、nが大きな数になれば、とてもゆっくりと動き出すようには思えない。ところが、視点をかえると、うまい具合に使える事がわかる。次回はそれを見てみたい。

モーション あれこれ その１

アクションスクリプトで物体に動きをつけるとき、単純に座標を増やしたり減らしたりでは、味気ないものになりがちである。イージングと呼ばれるゆっくり動き出したり、ゆっくりと止まったりする効果をつけたりする。また、止まるときに、跳ね返るような効果をつける事がある。ここでは、それらに使えそうな数式を考えてみたい。

まずは、記号の説明から。ここでは、物体の初期座標をp0、t秒後の座標をp(t)とする。そして、物体は、t1秒後にp1の位置で停止するものとする。ここでは、tを秒数(=時間)としたが、アクションスクリプトでのフレーム数に置き換えてもよい。

最初に、単純に座標を増やす例から。つまり、先に味気ないと言ったものである。これは、等速運動と呼ばれる。先の記号を使って書けば
となる。これを時間と移動距離のグラフにすると、のようになる。線の傾きが速さに示しているグラフである。

さて、イージングの効果が着いた場合、グラフはどうなるのか？始点、終点での線の傾きが水平に近くなるような曲線になると思われる。そのような形のグラフが描ける数式として、真っ先に思い浮かぶのは三角関数である。先の、記号を使って、式を書けば、となる。単振動と呼ばれる運動だ。これを時間と移動距離のグラフにすると、のようになる。両端で線はほぼ水平になっている。つまり、ゆっくりと動き始め、ゆっくりと止まる。しかし、これを実際に使ってイージング効果を付加してみるとわかるが、意外と効果が小さいのである。次回は、他の方法を考察してみる。