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

Question

私はこの問題を苦労しています。私が見つけることができるのは、高速であるがゆっくりと動作しているアニメーションです。私の質問は、長時間アニメーションをしたいが、やはりスムーズにしたいアニメーションに関するものです。

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

私は要素がゆっくり時間をかけて別の位置に移動しようとしています。しかし、アニメーションは非常に不安定です。

基本的に、それはこのようなものに沸く：問題はアニメーションは、各ステップは、ピクセル未満であるので、それはそれらを丸めているように遅いことであるならば、私は思ったんだけど

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

0または1のいずれかを指定すると、フレームをドロップしてからすべてを一度に移動するように見えます。しかし、私はこれをチェックしたり修正したりする方法を知らない。

スローアニメーションをスムーズにするためには、より良い方法がありますか？私は同様のものをCSS3で作成し、（x、y）を円滑に翻訳しましたが残念ながら私はCSSで得ることができるよりも柔軟性が必要です。

Answer 1

を持っています。

代わりにCSSトランジションをテストするためにTransit jQuery pluginを追加しました。ほとんど同じです。マイナーな修正と

あなたのコード：http://jsfiddle.net/thirtydot/93Bqx/5/

同じコードが、トランジットでは、追加：http://jsfiddle.net/thirtydot/93Bqx/6/。

これは、（ほとんどの）ブラウザがサブピクセルレンダリングをしないという事実の限界だと思います。あなたが言及したように、要素のxとyは、アニメーションのすべてのステップの後で丸められ、見苦しい「ジグリング」効果を引き起こすのはこの丸めです。

CSSトランジションバージョンは、病理学的テストケースが少ないほど顕著に改善されています。詳細については、この記事をお読みください：http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Answer 2

アニメーションをプログラム的に行うのは避けられない交渉だと思います。 はたぶん、アニメーションに特化フレームワークのようにしてみてください：

http://www.greensock.com/gsap-js/

をが、CSSにアニメーションを適応することがベストです。

Answer 3

要素の移動頻度と関係があると思います。たとえば、1秒に1回オブジェクトを移動すると、不安定に見えます。各移動の間隔を短くすると同時に、移動の間隔を短くしてください。例はhttp://jsfiddle.net/2K9xP/を参照してください。

だから我々はそれも、CSSトランジションを使用してよりスムーズではありません...

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

代わりに...

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