Easing.net :
Choisissez la bonne vitesse d'exécution pour rendre vos animations réalistes.

Le , par FirePrawn, Expert éminent sénior
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 ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de danielhagnoul danielhagnoul - Rédacteur https://www.developpez.com
le 23/03/2013 à 8:41
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"
Avatar de FirePrawn FirePrawn - Expert éminent sénior https://www.developpez.com
le 25/03/2013 à 9:20
La news ne concerne pas le plugin jQuery en même temps
Avatar de SpaceFrog SpaceFrog - Rédacteur/Modérateur https://www.developpez.com
le 25/03/2013 à 9:37
Un tableau de présentation visuelle de chacun des paramètres de easing est en effet une aide utile .
Avatar de danielhagnoul danielhagnoul - Rédacteur https://www.developpez.com
le 25/03/2013 à 10:03
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.
Offres d'emploi IT
Développeur WEB PHP F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
RESPONSABLE WEB ANALYTICS F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
Développeur Web FULL-STACK
VACALIANS GROUP - Languedoc Roussillon - SETE (34)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique CSS : Xavier Lecomte -