Discussion :

[FirePrawn]

Easing.net vous aide à choisir la bonne vitesse d'exécution
Afin de rendre vos animations plus réalistes

Animer des éléments sur une page Web est devenu possible grâce à la version 3 de CSS.
Ces animations ont très vite fait l'unanimité et sont de plus en plus utilisées, que ce soit à des fins ergonomiques ou à des fins scientifiques (jeux vidéo par exemple).
Cependant, il convient d'aller un peu plus loin que juste utiliser bêtement ces possibilités.

Easing.net vous explique ce qu'est « l'easing » et pourquoi c'est important.
En effet, une plume tombant d'un toit n'aura pas du tout la même vitesse de chute qu'une boule de bowling.
Et c'est précisément ces différences que nous explique Easing.net.

Le site fournit de nombreux graphiques animés vous permettant d'identifier et de comprendre les différents types d'animations possibles et existants.
Ces exemples vont de l'animation la plus simple (vitesse quasi constante) à des animations bien plus complexes.
Easing.net vous donne également trois exemples simples d'implémentation de « l'easing » :

• avec le plugin jQuery Easing ;
• en SCSS ;
• en CSS 3.

Pour plus d'informations et voir les exemples d'animations je vous invite à consulter la version française du site.

Source : thechangelog.com

Et vous ?

Utilisez-vous les animations ?
Si oui, vous préoccupez-vous de leur réalisme ?

[danielhagnoul]

Bonjour

Le plugin easing ? On ne peut pas dire que ce soit une nouvelle fraîche du jour !

Plugin : http://gsgd.co.uk/sandbox/jquery/easing/

Serveur de code : "http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"

[FirePrawn]

La news ne concerne pas le plugin jQuery en même temps

[SpaceFrog]

Un tableau de présentation visuelle de chacun des paramètres de easing est en effet une aide utile .

[danielhagnoul]

Je ne veux pas jouer les rabats joie ni vous faire de la peine, mais même le tableau de présentation c'est du déjà vu depuis longtemps. Disons que c'est une première dans la langue de Molière.