今更ながら、canvasを勉強中です。
前回に引き続き、canvasでやったことをつらつら書き残します。
この記事の目次
余談
はてブでJavaScript で画像をリサイズする方法が注目されていて、これはcanvas今のうちにしっかりと理解しておかないと駄目だ。と再認識。。。
そもそも、この使い方を知らなかったです。。。
canvasが使えても、ドヤ顔で全画面の背景に自作パーティクルの実装くらいしか使いみちが想定できてなかったのですが、
これを使えば、よりいろんなサービスに応用できそうですね。
今回、目指したもの。
canvas上で、JavaScriptを使って『バウンドアニメーション』を実装したい。
結果
一応、canvas上でボールが上下にバウンドするアニメーションは作れました。
また、バウンドするボールの挙動は、重力加速度を使って算出しているので、それなりにリアルな動き担っています。
ただ、バウンドの止め方がわかりませんでした。
一旦、頭を冷やす意味もあり、そのまま公開します。
時間を見つけて、よりリアルな挙動ができるように再挑戦してみます。
できたもの
See the Pen 【JavaScript】canvasでバウンドアニメーション by nkmrkisk (@rekid) on CodePen.
やったこと。
今回は、単純に重力加速度を元にs秒後の高さvを求めて、それをひたすらボールの位置(x,y)に代入し続ける。という形でコードを書きました。
また、その時にディレクション（向き）の判断も行っています。
その他
今回、誰かが書いてくれたコードはアテにせずにやり遂げる。という目標のもとコードを書きました。
理由としては単純に、「実装したいイメージをより正確に描写できるようになるため」です。
他人が書いたコードでもある程度綺麗なものはできますが、そもそもの本質を理解できていないと、微細な修正を行うことはできません。何より独りよがりで周りにアウトプットすることも難しいので、
まずは自分でやり遂げる -> 他の人のコードを読む -> なるほど！そういうのもあるのか！！ とやりたかったです。
まあ、作りきれませんでしたが。。。。