Animation : les bases

Plusieurs solutions s'offrent à vous

1. lancer une fonction à intervalle régulier
2. utiliser une fonction développée pour animer le DOM
3. privilégier le CSS si possible

Trois étapes pour réaliser une animation !

1.  // Step . What element do we want to animate? 
2.  // Step . What function will change it each time? 
3.  // Step : Call that on an interval

JS Bin

 frame

JS Bin

Devenir maître de l'animation

l'animation est rapide. Lorsque l'on veut maîtriser les valeurs à modifier, nous pouvons utiliser une équation simple :

var newValue = (startValue + ((currTime - startTime)/1000) * increaseValue)

(currTime - startTime)/1000 représente le temps écoulé en seconde : autrement dit, toute les secondeon ajoute à la valeur initiale la valeur à ajouter increaseValue.

Cette équation est à insérer dans la fonction d'animation. currTime est une variable globale de référence de début d'animation.

JS Bin

Stopper l'animation

JS Bin

css

JS Bin

Animating styles with requestAnimationFrame

Made using: Khan Academy Computer Science.