javascript - 遅い jQuery アニメーションが途切れるのはなぜですか?

Question

私が見つけることができるもののほとんどは、高速であるはずなのに動作が遅いアニメーションに関するものであるため、この問題をグーグルで検索するのに苦労しています. 私の質問は、長時間にしたいがスムーズにしたいアニメーションに関するものです。

問題を示すために、この jsfiddle を作成しました: http://jsfiddle.net/93Bqx/

時間の経過とともに要素をゆっくりと別の位置に移動させようとしています。しかし、アニメーションは非常に途切れ途切れです。

基本的に、それは次のようなものに要約されます。

$elem.animate({
        left: x,
        top: y
}, someLargeNumber);

問題は、アニメーションが非常に遅いため、各ステップが 1 ピクセル未満であり、0 または 1 に丸められて、フレームがドロップされてから一度に移動するように見えることではないかと考えています。しかし、これを確認または修正する方法がわかりません。

遅いアニメーションをスムーズに行うためのより良い方法はありますか? CSS3 と translate(x,y) で作成した同様のものはスムーズでしたが、残念ながら、CSS で得られると思うよりも柔軟性が必要です。

score 7 · Accepted Answer

プログラムでアニメーションを行うことは避けられない取引だと思います。次のようなアニメーションに特化したフレームワークを試してみてください。

ただし、アニメーションを CSS に適合させるのが最善です。

score 0 · Accepted Answer

要素を移動する頻度と関係があると思います。たとえば、オブジェクトを 1 秒に 1 回移動すると、途切れ途切れに見えます。各動きの間の時間を減らし、各動きの間の距離を短くしてみてください。例については、 http://jsfiddle.net/2K9xP/を参照してください。

だから私たちは...

var duration = Math.round(10 * distance);

それ以外の...

var duration = Math.round(1000 * distance);

3 に答える 3