反射するアニメーション

アニメーションは初期条件に沿って描写されるだけではなく、様々な要素によって動きを変えるように設定できます。
それによりアニメーションの動きにバリエーションを持たせることができます。
今回はCanvasの枠に接することを条件に動きを変える反射するアニメーションを作りたいと思います。

反射の処理と条件

ここでの反射とは単純に逆方向へと向かう動きと考えます。
今回のスクリプトは描写t毎に横方向にvx、縦方向にvyだけアニメーションが進みます。
そして条件に当てはまればvxとvyが-vxと-vyに変わります。これにより逆方向へと動くようになります。
条件は描写されている矩形がCanvasの枠に接することです。
矩形には左上隅を基準として大きさを設定しています。そしてCanvasも左上隅を基準としています。そのため条件のうちCanvasの右枠と下枠は、矩形の大きさ分だけ差し引いたものを用いています。