ANIMER EN DOUCEUR

illus

script : easeInOut
langage : javascript
catégorie : fragment
usage : Des effets d'accélération ou de décélération progressive. "Ease-in" et "ease-out", comme on dit en anglais !
tags : effets spéciaux

Concept

Dans le but de développer un script d'animation d'éléments HTML, j'ai cherché comment créer des animations qui ne soient pas linéaires, c'est à dire des animations qui aillent en s'accélérant ou en ralentissant. J'ai trouvé ceci, qui n'est pas la solution la plus complète, mais qui a le mérite d'être très léger. (Si vous recherchez quelque chose de très puissant, je vous recommande de vous intéresser aux courbes Bézier.)

Code

Le code de cette fonction est très court. Le voici :
(Un copier-coller devrait suffir, mais vous préférerez peut-être télécharger le fichier easeInOut.js.)

function easeInOut(startValue,endValue,totalSteps,actualStep,powr) {
  var delta = endValue - startValue;
  var stepp = startValue + (Math.pow(((1 / totalSteps) * actualStep), powr) * delta);
  return stepp;
}

Les arguments de la fonction sont tous obligatoires : 

startValue
la valeur de départ de l'animation (nombre réel)
endValue
la valeur de fin de l'animation (nombre réel)
totalSteps
le nombre d'étapes de l'animations (nombre entier)
actualStep
l'étape de l'animation à laquelle on est rendu (nombre entier)
powr
mesure l'effet d'accélération ou ralentissement. (nombre entier)
1 pour un animation linéaire
>1 pour une accélération progressive
<1 pour un ralentissement progressif


Pour l'étape demandée, la fonction vous retournera la valeur que vous devez attribuer à ce que vous animez. Il vous faudra l'appeler à chaque étape.

Commentaires