Quelles sont les meilleures pratiques pour déplacer des éléments avec javascript? Utilisez-vous des délais ou des intervalles? Est-il mauvais d'avoir des événements chronométrés pendant 10 millisecondes, ou sera-ce précis? Déplacez-vous pixel par pixel, ou une certaine fraction de la distance totale? Si vous utilisez des intervalles, comment arrêtez-vous l'intervalle lorsque l'élément est en position?

Les deux dernières fois, j'ai vu du mouvement en javascript avec jQuery et Raphael.js, dont je ne peux pas comprendre le code source. Y a-t-il de bons tutoriels ou des exemples de code quelque part? Existe-t-il une explication simple des méthodes utilisées par jQuery?

3
mowwwalker 29 oct. 2011 à 21:55

3 réponses

Meilleure réponse

Vous trouverez ici un bon tutoriel d'animation Javascript: http://www.schillmania.com/content/projects/javascript-animation-1

Mais ce que vous avez dit est vrai. Jquery Animate utilise setTimeout, déplaçant l'objet en fonction des calculs de durée, de position et d'accélération.

2
Afonso França 29 oct. 2011 à 18:05

Les intervalles sont préférables, je crois, parce que vous ne le définissez qu'une seule fois dans le code plutôt qu'une fois par trame. Il n'a besoin de lire le code qu'une seule fois et de le réutiliser plusieurs fois, plutôt que de le lire à chaque fois qu'il est créé.

10 ms est un peu court. L'ordinateur peut prendre en charge nativement des intervalles d'environ 16 ms, puis des minuteries plus précises peuvent être utilisées pour des intervalles plus rapides, mais ceux-ci sont très énergivores. IE9 prend en charge les deux, selon les paramètres d'alimentation de l'ordinateur, mais idéalement, vous ne devriez pas avoir besoin de plus de 50 ms (20 FPS).

J'aime déplacer une fraction de la distance totale, en fonction du temps qui s'est écoulé depuis le début de l'animation. De cette façon, quelle que soit la vitesse de l'ordinateur et du navigateur, l'animation prendra toujours exactement le même temps. Garanti.

Quelque chose comme:

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

JQuery est facile pour certains, mais personnellement je ne trouve rien de mieux que de l'écrire vous-même en clair, vieux JS. Il est beaucoup plus facile de comprendre ce qui se passe exactement, plutôt que de s'appuyer sur un cadre pour le faire pour vous.

1
Niet the Dark Absol 29 oct. 2011 à 17:59

Il existe une fonction récente appelée requestAnimationFrame qui exécute une fonction dès que possible. Il s'agit d'une bonne pratique car elle a été réalisée à des fins d'animation.

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

Dans la fonction, vous récupérez l'heure actuelle pour voir comment l'objet doit être positionné à cette heure.

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

Actuellement, ce n'est pas multi-navigateur et les fonctions sont préfixées par le fournisseur, par ex. webkitRequestAnimationFrame pour Chrome.

Par exemple: 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);
}
4
pimvdb 29 oct. 2011 à 18:11