JavaScriptでの要素の高速座標移動

質問

お世話になります。
JavaScript(jQueryは扱わない前提です)にて、要素の座標を滑らかに高速移動させたいと考えています。

私の考えた方法では、
setTimeout等のタイマー系のメソッドにて、
第一引数:該当要素のスタイルの座標ピクセルを加算•減少させる処理
第二引数:ブラウザが許容する範囲での最小単位の時間

第一引数にて、
加算•減少させるピクセル数を少なくすると、高速で移動させることができませんでした。かといって、そのピクセル数を増やすと、滑らかな動きにはなりません。

本件の解決方法がありましたら、ご教授をよろしくお願いします。

回答No.2

b0a0a · ベストアンサー

まずsetTimeoutはダメです
requestAnimationFrameを使ってください

お礼

そのような関数が存在したとは知りませんでした。
ご教授ありがとうございました！

回答No.1

noname#202910

イマドキの PCで、イマドキのブラウザならば、
タイマーは20ms未満でも回りますよね。
細かい方が滑らかにみえるのはそうですが、
そもそも要素が小さすぎで、
移動量が大きすぎる点が問題なのでは？

例えばニンゲンには、
銃弾はワープしてるように見えますよね
それは小さくて早過ぎるから。
現実世界がコマ飛びしてるわけじゃない。

というわけで、やや面倒ですが、
残像をつけてはいかがでしょう。
そうすると動くものが大きく見えて、
かつ「動き」や「つながり」が強調されます。

お礼

なるほど。マシンパワーをカバー出来る技術ですね。
その考えには至りませんでした。
ありがとうございます！