fc2ブログ

記事一覧

単位時間によるアニメーションの描写

JavaScriptのCanvasによるアニメーションはrequestAnimationFrameを利用した場合、60fps(1秒間に60回描写)のアニメーションになりますfps自体を変えてアニメーションの描写の速度を変更したりすることができますが、それは処理が増えてブラウザでの描写が重くなったりすることもありますそこでアニメーションの動きを表すコードに時間に相当する変数があれば、その時間の単位を変えることでfpsを変えずにスムーズにアニメーショ...

続きを読む

透明度を利用したアニメーション

JavaScriptのCnvas上アニメーションはclearRectメソッドを利用して描写をリセットして断続的なアニメーション描写を行うことができますが、Canvasの背景色と同じ色と同じサイズのfillRectメソッドを用いることで同じような描写ができます。ここでfillRectメソッドを用いる利点はfillRectメソッドの描写をアニメーションの表現に利用できることです。半透明の矩形を重ねる描写通常fillRectメソッドは塗りつぶした矩形を描写するメソ...

続きを読む

反射するアニメーション

アニメーションは初期条件に沿って描写されるだけではなく、様々な要素によって動きを変えるように設定できます。それによりアニメーションの動きにバリエーションを持たせることができます。今回はCanvasの枠に接することを条件に動きを変える反射するアニメーションを作りたいと思います。反射の処理と条件ここでの反射とは単純に逆方向へと向かう動きと考えます。今回のスクリプトは描写t毎に横方向にvx、縦方向にvyだけアニメ...

続きを読む

放物運動のアニメーション

地球上で斜め方向に物体を投げると、そのまま斜め方向に飛び続けるのではなく山なりに飛んで行って地上に落下します。それは地球上であれば物体には常に重力がかかる、地球の中心へと引っ張られるからです。このような運動を放物運動といいます。放物運動の速度の成分放物運動は鉛直方向(縦方向)と水平方向(横方向)の速度からなる運動です。ですので鉛直方向と水平方向の運動を合わせれば放物運動を表すことができます。鉛直方...

続きを読む

アニメーションでのイージング

イージングとは動きの緩急であり、これをアニメーションに取り入れると動きを滑らかに見せることができます。動きを次第に早くすることをイーズイン、緩やかにしていくことをイーズアウトといいます。イージングを活用することでアニメーションを自然体のように表現することができます。イージングでの等加速度運動の活用動きの緩急とは、つまり静止していたり一定の速度での動きに変化があるということです。速度が0である静止状...

続きを読む

プロフィール

memomemoprobe1

Author:memomemoprobe1
FC2ブログへようこそ!

カウンター