Perché le animazioni jQuery lente sono discontinue?

Question

Ho difficoltà a cercare su Google questo problema perché la maggior parte delle cose che riesco a trovare riguardano animazioni che dovrebbero essere veloci ma che agiscono lentamente. La mia domanda riguarda un'animazione che desidero avere una lunga durata ma che sia comunque fluida.

Ho creato questo jsfiddle per dimostrare il problema: http://jsfiddle.net/93Bqx/

Sto cercando di fare un elemento si muovono lentamente in un'altra posizione nel corso del tempo. Ma l'animazione è molto mossa.

In sostanza, si riduce a qualcosa di simile:

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

Mi chiedo se il problema è che l'animazione è così lenta che ogni passo è meno di un pixel e quindi li sta girando a 0 o 1, facendo apparire i frame e quindi spostarli tutti contemporaneamente. Ma non so come potrei controllarlo o correggerlo.

C'è un modo migliore per eseguire animazioni lente in modo che siano fluide? Ne avevo uno simile creato con CSS3 e translate (x, y) che era scorrevole, ma sfortunatamente ho bisogno di più flessibilità di quello che penso possa ottenere con i CSS.

Answer 1

Non è molto più agevole anche utilizzando una transizione CSS.

Ho aggiunto il Transit jQuery plugin per testare invece una transizione CSS e sembra quasi la stessa.

il codice con correzioni minori: http://jsfiddle.net/thirtydot/93Bqx/5/

Stesso codice, ma con transito aggiunto: http://jsfiddle.net/thirtydot/93Bqx/6/.

Penso che questo sia un limite del fatto che i (più?) Browser non eseguono il rendering di subpixel. Come hai detto, gli elementi x e dell'elemento vengono arrotondati dopo ogni fase dell'animazione, ed è proprio questo arrotondamento che causa l'antiestetico effetto "jiggling".

La versione di transizione CSS ha un aspetto notevolmente migliore per i casi di test meno patologici. Leggi questo per ulteriori informazioni: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Answer 2

Immagino sia l'inevitabile affare con l'animazione programmatica. magari provare un quadro specializzata in animazione come:

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

ma adattare l'animazione per i CSS sarebbe meglio.

Answer 3

Penso che abbia qualcosa a che fare con quanto spesso si sposta un elemento. Ad esempio, se muovi l'oggetto una volta al secondo, sembrerà mosso. Prova a diminuire la quantità di tempo tra ogni mossa e diminuendo la distanza tra ogni mossa. Vedi http://jsfiddle.net/2K9xP/ per un esempio.

Così abbiamo ...

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

invece di ...

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