単位時間によるアニメーションの描写
- 2023/08/31
- 22:27
JavaScriptのCanvasによるアニメーションはrequestAnimationFrameを利用した場合、60fps(1秒間に60回描写)のアニメーションになります
fps自体を変えてアニメーションの描写の速度を変更したりすることができますが、それは処理が増えてブラウザでの描写が重くなったりすることもあります
そこでアニメーションの動きを表すコードに時間に相当する変数があれば、その時間の単位を変えることでfpsを変えずにスムーズにアニメーションの速度を変更することができます
このスクリプトは時間の変数を含む等加速度運動のアニメーションです
それぞれ単位時間を1と0.5にしています
アニメーションの動きの速度のスケールも単位時間の比率に沿ったものになります
fps自体を変えてアニメーションの描写の速度を変更したりすることができますが、それは処理が増えてブラウザでの描写が重くなったりすることもあります
そこでアニメーションの動きを表すコードに時間に相当する変数があれば、その時間の単位を変えることでfpsを変えずにスムーズにアニメーションの速度を変更することができます
このスクリプトは時間の変数を含む等加速度運動のアニメーションです
それぞれ単位時間を1と0.5にしています
アニメーションの動きの速度のスケールも単位時間の比率に沿ったものになります
スポンサーサイト