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

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

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

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

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

No.1 回答者： ochikake 回答日時： 2014/05/18 13:11

イマドキの PCで、イマドキのブラウザならば、

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

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

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

この回答へのお礼

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

お礼日時：2014/05/19 23:49

No.2 ベストアンサー 回答者： b0a0a 回答日時： 2014/05/18 20:47

まずsetTimeoutはダメです

requestAnimationFrameを使ってください

この回答へのお礼

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

お礼日時：2014/05/19 23:46