L'easing [il y en aura d'autre]

Les accélération et les ralentissements :
Bonjour, aujourd'hui je vous présente mon tuto sur les mouvements.

Voila une anime sans accélération et les ralentissements



on voit clairement que c'est sec comme mouvement.
Là on voit une anim avec les accélération et les ralentissements



Oui il est très raide, mais bon je vous apprend l'easing là...
Et voila un mouvement avec les accélération et les ralentissements




Le double mouvement

Bon voila le même effet avec 2 mouvements

Une anim sans accélération, rallentissement.



Raide et pas belle !

Voila avec l'effet, mais toujours raide.



C'est mieux non ?

Voila sans raideur.



C'est pas trop mal, non ?

Comment on fait ça ?

Le but c'est d'aller d'abord, tous doucement, puis un peu plus vite, puis encore plus vite, etc... enfin regarder plutôt ca.


Bon on voit bien que les premières images sont bien plus proches l'une de l'autre que vers la moitier de l'anim, j'éspère que c'est pas du charabia pour vous :P .
Bon voyons la meme chose sur un mouvement:

C'est au ralentit, pour mieux voir les frames.

Et içi c'est en vitesse 20, normal:

On sent bien l'accélération, c'est juste pour vous montrez l'effet en gros.

Conclusion

C'est un effet trés utile je trouve, il embêlit bien et ca rend l'anim plus douce et plus agréable à regardé.
Et avec cette effet on peut faire des mouvements spéciaux, par exemple:


Je tien à préciser que c'est mon premier tuto et qu'il manque peut être quelques trucs.
Merci d'avoir suivit mon tuto et aurevoir :winkanim:

Dernière édition par illusion le Dim 15 Fév 2009 - 10:15, édité 4 fois

Je trouve ça plutôt sympa.
Cela dit, t'expliques pas vraiment les exemples, même si personnellement rien qu'en voyant les exemples j'ai bien compris ce qu'est l'easing.

De plus, le tuto sur la fluidité de Firefox prend déjà en compte l'easing, mais je sais pas si c'est mal d'avoir un tuto particulier pour ça.

effectivement les exemples sont assez raides mais c'est pas non plus un tuto sur la raideur;)
le probleme est que tu ne nous donnes pas vraiment de technique,tu devrais faire un exemple framme par framme ou un truc dans le genre.
et pour finir un tuto sur la fluidité a déja été fait,mais comme le tien est en construction,ce que tu dis au début,tu pourrais approfondir le fameux tuto de firefox.
good luck!

PS:désolé dreizen,j'avais pas vu ton post!

Je ferais le truc frames par frames une autre fois, parce là j'ai du boulot pour demain et j'ai pas vraiment le temps maintenant...
Je trouve quand même que le tuto de Firefox est bien, mais il nous montre juste un saut, et moi je trouve mieux d'avoir un mouvement plutôt qu'un saut... Puis il voulais remettre à neuf les tutos donc j'éspère aider quelques personnes.
:winkanim:

Bah je le trouve sympa moi ce tuto. Et je trouve bien l'idée de mettre des petits effet de vitesse pour qu'on voit bien la position de la figure dans les anciennes frames pour ton exemple du "truc rond mais pas trop". Les autres exemples sont bien aussi. Et même si le tuto de fox prend en compte l'easing c'est toujours bien d'en avoir plusieurs ;)

J'accepte ^^

très bon tuto merçi à toi

personnellement je savais pas trop ce que c'était que l'easing et maintenant je sait donc c'est un bon tuto ^^

Merci Illusion pour ce super tuto je savis pas ce qu'était l'easing et grâce a toi je sais maintent ce que c'est. :pliz: :cheers:

Merci encore :(top):