質問: _y + y; } } ``` ### 追記 Final Cut Pro Xのタイムラインを見ると、フレーム数が基準になっているようでした。 自分がよく使う設定では30pになっていて30フレームで1秒になる設定でした。 となると、アニメーションの基準として考えるのはフレームということですかね。
回答: > > アニメーションは秒数を基準に考えるべきなのか?フレーム数を基準に考えるべきなのか? > > > 普通FPSを意識する事なんて、格ゲーやFPS等の1フレームの動作の遅延が勝敗を影響するゲームくらいでしかないですよね? 「例えば、10秒かけてX軸方向に100px進めさせたいとした場合」のように基本的に人間が扱う単位は秒なので、秒数に従いましょう。 > > フレーム数を基準に考えた場合、実際のFPSは変動するから、その影響を考慮する必要があるのか?考慮する場合はどういうことを気にする必要があるのか? > > > 気にする必要があります。 例えばウィルス対策ソフトが裏でファイルスキャンを始めたりして遅くなった場合、 ブラウザーはマシンをフリーズさせない為にFPSを落として描画する事があります。 他にもChromeではバックグラウンドに居る場合、1FPS程度に描画の更新頻度を落として負荷を減らす実装になっています。 > > 何秒かけて始点から終点に移動させるというコードをどう書いて良いかわからない。 > > わからない原因はFPS周りのところで混乱しているため。 > > > jQuery3や、Velocity.jsというアニメーション専用のライブラリの、アニメーション周りのソースコードをざっと読んだ事があります。 その意訳を下記に記載します(ホントかどうか実際にソースコード読んでみてください) 5秒掛けて黒丸が100px移動するアニメーション関数loopを実装した前提で記載します。 1. 今の時刻(何時何分何秒)を拾得して変数として保存 2. loop関数が呼ばれたら、今の時刻と1の時刻のdiffを取る 3. diffを取った結果、2800ms経過していた場合、`100px / 5000ms * 2800ms = 56px`進んでいるべきという事が分かる 4. 黒丸を56pxの場所に再設置する 5. 5秒過ぎていたら終了、それ以前ならば`requestAnimationFrame(loop);`を再度実行