Animation lisse JavaScript de X, Y à X1, Y1

Si vous ciblez des navigateurs modernes, les transitions CSS facilitent la vie (exemple de Firefox, pour d'autres navigateurs, changez le préfixe -MOz): xxx

et le script xxx

Faire une animation lisse sur les systèmes avec une variété de capacités différentes (CPU, puissance graphique, autres choses qui se passent sur l'ordinateur) n'est pas une tâche triviale. Une implémentation appropriée consiste à développer un algorithme "Tweening" efficace capable de déterminer de manière appropriée (comme l'animation fonctionne) de quoi l'utilisation de l'animation afin de rester à l'horaire et d'être aussi lisse que possible.

La meilleure façon de faire est de se tenir sur les épaules des autres et d'utiliser ce qui a été inventé avant. De nos jours, je n'essaierais jamais d'écrire cela moi-même de zéro. Il est là d'utiliser dans les transitions / animations CSS3, mais ceux-ci ne sont pas encore soutenus partout. Il est là d'utiliser ou d'analyser dans JQuery et Yui3. Mon premier choix serait d'utiliser l'un des cadres ayant un ensemble de capacités riches ici. Vous n'avez pas besoin d'utiliser le cadre pour autre chose, vous pouvez simplement l'utiliser pour l'animation si vous le souhaitez. YUI3 vous permettra même de construire une bibliothèque qui a le moins de code possible pour exactement ce que vous voulez. JQuery n'est pas très gros pour commencer.

Si vous êtes toujours mort pour utiliser l'une des bibliothèques, téléchargez la source sur les modules correspondants pour chaque bibliothèque et étudiez comment ils le font. Construisez une application d'exemple dans chaque fois que cela fonctionne, définissez des points d'arrêt à des endroits intéressants. Ce sera le meilleur enseignant et vous montrera comment construire un algorithme de Tweening efficace pouvant s'adapter aux capacités de vitesse de l'ordinateur hôte.

Pour vous donner une idée de la façon dont un algorithme de Tween fonctionne pour une animation droite (avec une assouplie linéaire), vous effectuez un calcul initial de ce que vous souhaitez que votre valeur d'étate d'animation soit pour le moment où vous souhaitez que l'animation soit exécutée. Ceci est probablement juste une supposition sur ce que le système peut supporter. Vous divisez le nombre d'étapes qui crée au moment de l'exécution de l'animation et que vous définissez une minuterie pour cette durée pour que vous sachiez quand vous savez quand exécuter l'étape suivante. Vous courez ensuite une ou deux étapes de l'animation et vous voyez combien de temps s'est effectivement écoulé. Si l'ordinateur ne peut pas suivre votre valeur de pas, vous serez en retard et vous devrez vous adapter et choisir une étape plus importante.

Maintenant, si vous voulez faire quelque chose d'autre que l'assouplissement linéaire, il y a évidemment encore plus impliqué.

Firefox et Chrome ont également mis en place de nouvelles API expérimentales pour aider à une animation lisse. J'ai découvert cela moi-même lorsque vous regardez la source de jQuery car elle l'utilise quand elle est disponible. Chrome, il s'appelle webkitiquestanimationframe et vous pouvez en lire à propos de ici dans un blog de Firefox .

Si j'allais écrire à partir de zéro, je commencerais avec quelque chose comme ceci: xxx pré>

par exemple, pour déplacer un DIV à (50,50) sur les deux secondes suivantes. P>

var elem = document.getElementById("animatable");

setTimeout(function() {
    animateTo({
        element: elem, 
        left: 50, 
        top: 50, 
        totalTime: 2000,
        ease: linearEase
    })
}, 10);