L'Easing, Une Notion Capitale !

TUTORIEL SUR L'EASING
L'Easing, Une Notion Capitale !

I : Résumé sur l'Easing

1) Qu'est-ce que l'easing ?

Easing : c'est un mot anglais qui désigne l'accélération/ralentissement.

C'est en fait un sous-ensemble de la fluidité. Gné ? C'est simple, l'easing fait parti de la fluidité.
C'est pour ça que je vous ai dit de lire le tutoriel sur la fluidité avant (Bah oui c'est pour votre bien quoi =) ).

2) Comment je fais cela ?

Eh bien vous faites que votre objet (ou membre d'un stickman) se déplace progressivement de plus en plus vite puis ralentit de la même façon.
Par exemple : si vous faites rouler une bille par terre, elle accélère petit à petit puis ralentit progressivement. Ceci est dû aux forces de frottement qui s'exercent sur la bille. De même, l'air exerce des forces de frottement sur les objets.
Si vous avez une pente, alors il faut prendre en compte la mesure de l'angle de la porte [tan X = (cos X)/(sin X)] ainsi que le poids de l'objet [P = mxG](avec "m" la masse et "G" la constante gravitationnelle (environ = 9,81)) qui est toujours dirigé vers le centre de la terre (environ situé à 6400km de profondeur). Pour résoudre cela il faut créer un répère orthonormal dans le schéma et additionner toutes les abscisses et toutes les ordonnées des forces en présence grâce à la correspondance des angles et au théorème de Phytagore. Ce qui nous donne ensuite un système simple d'équation à une inconnue facilement résolvable.

Bon je vais vous donner des exemples schématisés ( "|" est le changement de frame et "-" correspond à une unité arbitraire de mouvement un mouvement) :

- Easing "poussé" : ||-|--|---|----|------|----|---|--|-||
En image : ----------

- Easing "normal" : ||-|--|----|------|------|------|----|--|-||
En image : ----------

- Easing "marqué" : ||-|--|---|-------|--------|-------|---|--|-||
En image : ----------
Moi je le dit comme ça, ce n'est pas le cas de tout le monde.
C'est l'easing employé en heavy-spacing...

Pour plus d'exemples, vous pouvez aller consulter le tutoriel d'illusion ici. Il est judicieux d'aller le voir après celui-ci si vous n'avez pas encore tout à fait saisi.

II : Pourquoi une "Notion Capitale" ?

Vous vous êtes peut-être dit en voyant ce que j'ai écris précédemment : "MER IL ET FOU ! J'ai déjà vu ça quelque part... Mais c'est bien sûr ! Eurêka ! C'est la même chose que la physique !".
Eh bien vous n'avez pas tout à fait tort (mais pas tout à fait raison quand même =P) !
Comme je l'ai dis en introduction, l'easing met en relation toutes les autres notions ! Mais là je radote, passons au concret !

Comment intervient-elle dans toutes les autres notions ?

C'est en fait par relation de cause à effet que l'easing intervient. Je sais, ça a l'air compliqué mais ça ne l'est pas vraiment.
Pourquoi les animations des néophytes paraissent-elles baclées ? Ne cherchez pas, la réponse est là (ne cherchez pas de lien c'est plus bas qu'il faut regarder^^).

La raideur apparait lorsque l'easing n'est pas assez présent. Quand on ralentit (ou accélère) trop brusquement, à la fin (ou au début) du mouvement, les points rouges restent au même endroit et ça donne une impression de raideur (et parfois une saccade) !

Les saccades apparaissent généralement chez les nouveaux lorsqu'ils essayent de retirer la raideur en bougeant tous les points rouges. Il faut en effet bouger tous les points rouges (sauf les pieds lorsqu'il reste au même emplacement) mais dans le sens logique du mouvement.
Les saccades apparaissent aussi lors d'un changement brutale de vitesse ou de direction (donc quand l'easing et la fluidité ne sont pas respectés).

C'est ici que la physique intervient ! C'est elle qui définie le sens logique des mouvements qui répond à la loi de la gravité ! Aussi, lorsque tu lance un objet en l'air, il ralentit jusqu'à arriver à un point sommet puis redescend de plus en plus vite. C'est l'easing appliqué à un objet inerte.

Pour que cela soit plus explicite (et parce qu'on me l'a demandé^^), je vais vous donner un exemple :

- sans easing :

Mauvais rendu : raideurs et saccades. ===> Niveau : Néophyte

- avec un mauvais easing :

Meilleur rendu mais : quelques raideurs et quelques saccades.===> Niveau : Débutant

- avec de l'easing :

Beau rendu : quasiment plus de raideurs et plus de saccade.===> Niveau : Intermédiaire =)

J'ai utilisé la même vitesse et le même stickman pour tous ces exemples.



L'easing est la clef de la réussite =D Il est donc capitale de savoir le gérer !

J'espère que ce tutoriel vous aura aidé.

Si vous pensez que j'ai oublié des choses ou que certaines de mes explications ne sont pas très claires ou quelque peu incorrecte, dites le moi.

C'est beau, c'est bien expliqué et cette fois il y a des exemples, je ne peux qu'accepter, bravo \o/ !

Merci à toi Ô brave Ropy' !
Cette foi ci on ne pouvais pas me le refuser de toute façon^^

Je trouvais qu'il manquait un tuto complet sur l'easing =)

J'adore ce tutos ! c'est vraiment très claire, bien fait tout ça ! Merci Vypyr

PS : Je connais l'origine de ton pseudo =)

Wa! Magnifique tuto je le préfère a celui de illusion ^^.Bravo :(top): .

Beau tuto bien expliqué : )

Les exemples sont super, super beau mais
l'easing est présente c'est ce qui compte =P

Franchement bravo, et oui je mettrai
un lien vers ton tuto dans mes post chez les nouveaux.

*S'incline*

Merci Joker (je suis pas encore inter donc forcement les exemples...) !
Je suis content de voir que mon tuto est mieux que de vouloir sodomiser les libellules (ce qui est franchement inutile^^) !

PS : Mon pseudo vient de la gamme Vypyr de la marque d'ampli Peavey =)

Moi j'aime surtout les exemples avec le bâton, t'as bien varié et tout, là c'est sympatoche.

Au niveau des autres exemples, t'as assez bien géré l'easing, en revanche l'animation est pas énormément convaincante.

Mais ça passe pour moi. Ce tuto, il le fait, même s'il a déjà un cousin, voire même deux.

Bon je vais vous donner des exemples schématisés ( "|" est le changement de frame et "-" correspond à une unité arbitraire de mouvement un mouvement) :

C'est clair que tous le monde comprendrait pas ça mais tu devrais ne pas le barrer, ça apprendrais des choses au gens.
Sinon, super tuto, tu as tu bien t'embêter a faire les exemples avec les trainées...

Il a sa place ici, en tous cas...