Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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

Le , par FirePrawn

0PARTAGES

0  0 
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 ?

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de 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"
0  0 
Avatar de 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
0  0 
Avatar de 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 .
0  0 
Avatar de 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.
0  0