CSSアニメーションでスムーズなバウンド(仮)

CSSアニメーションを使って、ボールがぴょんぴょん跳ねる挙動を作成しようと思います。

※まだ未完成です。

  • CSSアニメーションは、時間と位置を指定することが出来る
  • 反発係数などの値を仮で決める
  • 運動エネルギー、位置エネルギー、反発係数関係の式から位置を算出
  • CSSアニメーションで指定する

といった流れで作成します。

まず高さhからボールが落下するときの時間を求めます。

高さhからの自由落下であるのでh=gt^2/2 を変形しt=√2h/gとします。

また、ボールが発射され高さhまで飛んで地面まで落ちるまでの時間は

高さhから地面まで落下する時間の2倍なので

ボールが高さhに上がってから落ちるまでの時間は t(1) = 2√2h/g となります。

次に2回目のバウンドを計算します。

2回目にバウンドした後のボールの速度は、反発係数をeとするとバウンドする直前の速さのe倍の速度になる。

速度e倍のボールが到達する地点は(ev)^2/2gで、

地面に落ちるまでの時間t(2) = 2e√2h/gとなる。

つまりボールが最初の位置から発射され、2回目のバウンドが終わるまでの時間t(all)は

t(all) = t(1) + t(2)  = 2(1 + e)√2h/g となる。

ここで、

h=100px , g = 10px/s^2 , e=0.5 の場合

t(1) = 8.92s , t(2) = 2.23s , t(all) = 11.15sとなる。

この値を元にCSSアニメーションを組めば、現実世界の挙動と同じになる。

予定だったのですが、animation-timing-function: ease; の指定の仕方で、上手く挙動させることが出来ませんでした。(カクカクした動きになる)

これをもっとなめらかにするには、三角関数でもう少し細かい値を出す必要があるのではないかと考えています。

しかし、ある方のブログにも書いてありましたが、

よりリアルなアニメーションを実現するためには、
現実世界の物体の動きをよく観察して、
それに「如何に近づけていくか、どこまでマネできるか」ということが重要となってきます。

らしいので、常日頃どのようにすれば上手くアニメーション出来るか考えたいと思います。

くそー悔しい。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク