> Les easing pour assouplir vos animations
Les easing, ce sont des équations mathématiques qui…
bon ça va surtout vous permettre de bouger des trucs à l’écran, oui mais avec un mouvement élastique du bel effet !
On retrouve les mêmes équations d’un langage à l’autre, et les plus utilisées sont illustrées ici : http://easings.net/fr
Ca devrait vous aider à choisir celle qui vous convient…
Celles que j’utilise couramment :
- easeOutQuart
- easeInOutQuart
- easeOutBack
- easeOutElastic (en fait non, mais j’aimerais bien, des fois)
Pour vous en servir avec les animations CSS3 par exemple (le plugin Transit vu dans un précédent post-it), il faut comme toujours importer un plugin.
Celui-là est très léger (juste des maths dedans), et on le trouve ici : http://gsgd.co.uk/sandbox/jquery/easing/
Une fois le plugin installé (dans votre dossier de projet et le header de votre page HTML…), il faut souvent l’ajouter en paramètre de la fonction d’animation :
$('header').transition( {'x':'0', 'rotate':'0deg'}, 600, // durée 'easeOutBack' // easing (optionnel) );
Les easing peuvent servir sur TOUTES les fonctions jQuery qui ont un paramètre de durée…
Sur le scroll par exemple, avec le plugin scrollTo :
$(window).scrollTo( $('#references') , 1000 , {easing:'easeOutQuart'});
ou sur la fonction d’animation native de jQuery (qui est moins performante et complète que Transit) :
$( "#book" ).animate( {width: 200px, height: 100px}, 5000, "easeOutElastic" );