jQueryで立体的な動き（.animation()に挑戦）
立体的な動きをさせてみる。
何と言うのか、スロットマシーンのような動きをしたい。3Dの立体的スライドショーとも言うかもしれない。
本当に文字が円筒に張り付いているような動き（文字自体にも遠近感を出す）は難しいが、せめて観覧車のような動き（伝わるだろうか…）をさせてみたい。
単純に動かしてみると
上から下、下から上に移動させつつ、近づいてくるときはフォントサイズを拡大、遠ざかっていくときは縮小させてみる。
スロットマシーンのような動きをする 試作（3Dスライドショー風の効果）
なんだか、イケてない。線形に動かすだけだと、手前にやってくる感じ、遠ざかっていく感じが出てない。
改善案をなんとなく考えると
上から回ってくるとき、最初の方ほど近づいてくる量が大きく、後になるほど近づくスピードは遅くなる。
垂直方向の位置は、最初の方ほどゆっくり落ちてきて、後になるほど速度を上げて目の前を通り過ぎていき、また下の方に回っていくとゆっくりの移動になる。
ならばということで、jqueryプラグインのeasingを使って、easeInQuad（初速は遅く、後で加速する）、easeOutQuad（初速は速く後になるほど遅くなる）をさせてみる。
スロットマシーンのような動きをする その１（3Dスライドショー風の効果）
ちょっとマシになった気がする。
でもそうじゃないんだな
円運動なのです。ここは三角関数なのです。
easeInQuad、easeOutQuadは二次関数が使われており、物を投げたり落下させるときのような動きには使えるが、ここは三角関数を使うeaseInSine、easeOutSineを使ってみる。
スロットマシーンのような動きをする その２（3Dスライドショー風の効果）
ころころ転がってる感じが出たように思う。
最初から三角関数を使おうと思いつくようでないとだめですね。中学、高校レベルの数学はすぐ使えるようでなくては。
ついでに数を増やすと？
ここまでやるときは、最初の位置と大きさの計算だけに三角関数を使って、その後の動きについてはあまりこだわらなくてかまわないと思います。
コメント