個人的には昔からずっと魔法の式と呼んでいる式がありまして、まるでバネのようにビヨンビヨンするような、ポヨンポヨンするような、水風船を振り回しているような、そんな動きをする式です。見てもらった方が早いと思うので、以下のエリア内にマウスを持っていってクルクル動かしてみてください。
加速力
摩擦力
バネの強さ
スライダーで動きを調整できるようにしましたので、いろいろ値を変えて試してみてください。
で、この動きをどのような式で実現しているのかというとこんな感じです。
スピード = (スピード + (目標値 - 現在値) / 摩擦力) * 加速力;
現在値 += スピード * バネの強さ;まずは現在のスピードや、行きたい場所と現在地点間の距離、摩擦力、加速力を利用して新しいスピードを計算して、その後現在地点に新しいスピードをプラスする感じです。スピードをプラスする際にバネの強さを考慮します。
上のサンプルの場合だと、目標値というのがマウスカーソルの座標で、現在値がおむすびの座標です。平面なのでX座標とY座標でそれぞれ計算しています。
それでは次のサンプル。こちらは移動ではなく大きさに使用してみたサンプルです。
押してる時間によって文字のサイズが変わりますので、いろいろ押してみてください。
あと拡大でもう一つ。こちらはマウスオーバーとクリックで動きます。
移動にしても拡大にしても面白いというか気持ちいい動きをするのでいろいろ使い勝手はいいと思います。普通のWebサイトにはあまり使い所がないかもしれませんが、ゲームとかだとちょっとした演出に使えるのではないでしょうか。
コメントを残す