jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.1.28

canvasアニメでオブジェクトを自由落下させる

Category:
Canvas

個人的に最近canvasアニメにハマっているということもあり、立て続けに2件の記事を書きました。

前者では、canvasをどう扱えばアニメが作れるのかの基礎的な部分を、後者では、速度を取り入れることでオブジェクトを動いているように見せる手法について、それぞれ解説しました。

今回は、オブジェクトがよりリアルな動きをしているように見せるには、どのように速度を計算すればよいのか、比較的簡単な「自由落下」を用いて解説してみます。

高校物理の教科書を拾い読みした限りでは、自由落下運動の公式は以下とのことです。

vy = 1 / 2 * g * t * t

よくわからない記号がいくつか出てきたので、1つずつ見ていきましょう。

vy y方向の速度です。
g 重力加速度です。 重力加速度とは、落下する物体が1秒ごとに何m/sずつ速くなるかを示す値とのこと。現実にある重力加速度は9.80665m/s2ということですが、ブラウザで閲覧する場合は単位がメートルではなくpxになるので、canvasで利用する際は任意でよいと思います。
t オブジェクトが落下してから経過した時間です。

上記の式を利用して速度を計算し、前回までのコードにあてはめて作成した自由落下のアニメーションが以下になります。

See the Pen free fall motion - 自由落下運動 by ykob (@ykob) on CodePen.

ただ落下しているだけだとまだまだリアルな物体には見えてこないですね。
ここから更に、加速度に応じてオブジェクトを変形させるとか、底についたときに反発させるとか、さらに動きを加えていくことによってアニメのクオリティにも磨きがかかるのだと思います。

そういった演出については僕もまだ勉強中なので、うまく扱えるようになった際にまた記事にしたいと思います。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.