バネのような動きをする式

個人的には昔からずっと魔法の式と呼んでいる式がありまして、まるでバネのようにビヨンビヨンするような、ヨーヨーを振り回しているような、そんな動きをする式です。見てもらった方が早いと思うので、以下のエリア内にマウスを持っていってクルクル動かしてみてください。

スライダーで動きを調整できるようにしましたので、いろいろ値を変えて試してみてください。

どのような式かというとこんな感じです。

スピード = (スピード + (目標値 - 現在値) / 摩擦力) * 加速力;
現在値 += スピード * バネの強さ;

スピード = (スピード + (目標値 - 現在値) / 摩擦力) * 加速力;
現在値 += スピード * バネの強さ;

まずは現在のスピードや、行きたい場所と現在地点間の距離、摩擦力、加速力を利用して新しいスピードを計算して、その後現在地点に新しいスピードをプラスする感じです。スピードをプラスする際にバネの強さを考慮します。

こちらは移動ではなく大きさに使用してみたサンプルです。

押してる時間によって文字のサイズが変わりますので、いろいろ押してみてください。

あと拡大でもう一つ。こちらはマウスオーバーで動きます。

移動にしても拡大にしても面白いというか気持ちいい動きをするのでいろいろ使い勝手はいいと思います。普通のWebサイトにはあまり使い所がないかもしれませんが、ゲームとかだとちょっとした演出に使えるのではないでしょうか。