Pourquoi les animations jQuery lentes sont-elles agitées?

Je vais avoir un moment difficile de googler ce problème parce que la plupart des choses que je peux trouver sont sur les animations qui sont censés être rapide, mais agissent lentement. Ma question est au sujet d'une animation que je veux avoir une longue durée, mais toujours en douceur.

J'ai créé ce jsfiddle pour illustrer le problème: http://jsfiddle.net/93Bqx/

Je suis en train de faire un élément se déplacer lentement vers une autre position au fil du temps. Mais l'animation est très agitée.

En gros, ça se résume à quelque chose comme ceci:

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

Je me demandais si le problème est que l'animation est tellement lent que chaque étape est inférieure à un pixel et donc, il est arrondi à 0 ou 1 faire apparaître à déposer des cadres et de passer ensuite à la fois. Mais je ne sais pas comment je pourrais vérifier ou de corriger cela.

Est-il un meilleur moyen de faire ralentir les animations qu'ils soient lisses? J'ai eu un similaire créé avec CSS3 et translate(x,y) qui a été bon, mais malheureusement, j'ai besoin de plus de souplesse que je pense que je peux obtenir avec les CSS.

source d'informationauteur Brad Dwyer

  1. 5

    Il n'est pas beaucoup plus lisse, même en utilisant une transition CSS.

    J'ai ajouté le Transit plugin jQuery pour tester une transition CSS au lieu de cela, et il semble presque le même.

    Votre code avec des corrections mineures: http://jsfiddle.net/thirtydot/93Bqx/5/

    Même code mais avec Transit a ajouté: http://jsfiddle.net/thirtydot/93Bqx/6/.

    Je pense que c'est une limitation du fait que (la plupart?) les navigateurs ne pas faire de sous-pixel rendering. Comme vous l'avez mentionné, la x et y de l'élément est arrondi après chaque étape de l'animation, et c'est cet arrondissement qui provoque la disgracieux "gigote".

    La transition CSS version a l'air nettement mieux pour moins pathologiques des cas de test. Lire ceci pour plus d'informations: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

  2. 7

    J'imagine que c'est inévitable de négocier avec le fait de l'animation de la programmation.
    Peut-être essayer un cadre spécialisé dans l'animation comme:

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

    mais l'adaptation de l'animation en CSS serait un plus.

  3. 0

    Je pense qu'il a quelque chose à voir avec la façon dont souvent vous déplacer un élément. Par exemple, si vous déplacez l'objet, une fois par seconde, il semble agitée. Essayez de diminuer la quantité de temps entre chaque mouvement ainsi que la diminution de la distance entre chaque mouvement. Voir http://jsfiddle.net/2K9xP/ pour un exemple.

    Nous avons donc...

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

    au lieu de...

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