En déplaçant les éléments avec javascript

Quelles sont les meilleures pratiques pour déplacer les éléments avec du javascript?
Utilisez-vous des délais d'attente ou les intervalles?
Est-il mauvais d'avoir des événements temporisés pour les 10 millisecondes, ou seront-ils précis?
Ne vous déplacer pixel par pixel, ou d'une certaine fraction de la distance totale?
Si vous utilisez des intervalles, comment voulez-vous arrêter de l'intervalle lorsque l'élément est en position?

Les deux dernières fois où j'ai vu le mouvement en javascript ont été avec jQuery et Raphael.js ni de ce que je peux comprendre le code source de. Y at-il des bons tutoriels ou des exemples de code n'importe où? Est-il une explication simple des méthodes jQuery utilise?

OriginalL'auteur mowwwalker | 2011-10-29

  1. 2

    Ici vous pouvez trouver une bonne Javascript tutoriel sur l'Animation:
    http://www.schillmania.com/content/projects/javascript-animation-1

    Mais ce que vous avez dit est juste. Jquery Animate utilise setTimeout, le déplacement de l'objet de base dans les calculs de durée, de position et d'accélération.

    OriginalL'auteur Afonso França

  2. 4

    Il est une nouvelle fonction appelée requestAnimationFrame qui exécute une fonction dès que possible. C'est une bonne pratique, car il a été fait pour l'animation fins.

    La façon dont cela fonctionne en termes de codage est le même que setTimeout, par exemple, lorsque la fonction se termine, vous appeler requestAnimationFrame.

    Dans la fonction, vous chercher à l'heure actuelle de voir comment l'objet doit être positionné à l'époque.

    Vous pouvez annuler une fonction en attente avec cancelRequestAnimationFrame, en passant la valeur de retour de requestAnimationFrame.

    Actuellement, ce n'est pas cross-browser et les fonctions sont préfixé fournisseur, par exemple webkitRequestAnimationFrame pour Chrome.

    E. g.: http://jsfiddle.net/pimvdb/G2ThU/1/.

    var div = document.getElementById('div');
var animation;

function move() {
    var time = Math.round((new Date()).getTime() / 10) % 200;

    div.style.left = time + 'px';

    animation = requestAnimationFrame(move);
}

document.getElementById("start").onclick = function() {
    animation = requestAnimationFrame(move);
}

document.getElementById("stop").onclick = function() {
    cancelRequestAnimationFrame(animation);
}

    OriginalL'auteur pimvdb

  3. 1

    Intervalles sont préférable, je crois, parce que vous ne réglez qu'une seule fois dans le code plutôt qu'une fois par image. Il suffit de lire le code une fois et de le réutiliser plusieurs fois, plutôt que de lire à chaque fois qu'il est créé.

    10ms est un peu court. L'ordinateur peut nativement en charge des intervalles d'environ 16 ms, puis de plus en plus précise les minuteries peuvent être utilisés pour accélérer les intervalles, mais ces derniers sont très consommatrice en énergie. IE9 prend en charge à la fois, en fonction de la puissance de l'ordinateur les paramètres, mais, idéalement, vous ne devriez pas besoin de rien de plus rapide que de 50ms (20 FPS).

    J'aime bouger une fraction de la distance totale, basé sur le temps qui a passé depuis que l'animation a commencé. De cette façon, quelle que soit la vitesse de l'ordinateur et de navigateur, l'animation prendra toujours le même montant de temps. Garanti.

    Quelque chose comme:

    interval = setInterval(function() {
    //do stuff
    if( /*animation ended*/) clearInterval(interval);
},time);

    jQuery est facile pour certains, mais personnellement, je trouve rien ne vaut l'écrire vous-même dans la plaine, vieux JS. Beaucoup plus facile de comprendre ce qu'il se passe exactement, plutôt que de s'appuyer sur un cadre de travail pour trouver la bonne formule pour vous.

    Comment puis-je faire que de plus en plus dynamique? Je veux être en mesure de supprimer l'intervalle à l'aide de la fonction et non pas simplement spécifier un montant exact. Je ne sais pas comment un intervalle serait pass si..
    Si la variable est définie dans l'fermeture avec var, et vous n'avez pas l'écraser dans sa fermeture, il n'y a rien de mal à cela.

    OriginalL'auteur Niet the Dark Absol