IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

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 !

Les interpolations et fonctions d'easing avec Lazarus III - Les courbes d'easing
Un billet de Gilles VASSEUR

Le , par gvasseur58

0PARTAGES

Les courbes d'easing qui seront au cœur de ce travail sont des interpolations plus ou moins standardisées que nous retrouvons un peu partout sur Internet dès qu'il est question d'animations.

Nous pouvons distinguer des courbes d'easing de quatre types :

  • In : l'interpolation suit une formule mathématique d'accélération positive (inertie) ;
  • Out : l'interpolation suit une formule d'accélération négative (décélération) ;
  • InOut : la première partie de l'interpolation est de type In, la seconde relevant du type Out (inertie, accélération puis décélération);
  • OutIn : la première partie est de type Out, la seconde relevant du type In (effet de pause en milieu de parcours avec un premier freinage puis une accélération positive).


De nombreux frameworks ignorent le type OutIn : par exemple, FireMonkey (Delphi) ou .Net. Il peut sembler peu naturel par rapport aux autres, mais nous l'implémenterons malgré tout.

Voici une représentation graphique générale de ces quatre types d'interpolation :


À partir de ces types fondamentaux, les courbes réelles plus ou moins prononcées sont obtenues selon les fonctions, formules ou degrés appliqués.

Les noms des catégories auxquelles seront appliqués les types déjà décrits seront les suivants :

  • Quad : application d'une formule du second degré ;
  • Cubic : application d'une formule de degré 3 ;
  • Quart : application d'une formule de degré 4 ;
  • Quint : application d'une formule de degré 5 ;
  • Sine : application d'une formule comportant une fonction sinusoïdale ;
  • Expo : application d'une formule à base d'exponentielle (puissances de 2) ;
  • Circ : application d'une formule à base de cercle ;
  • Elastic : formule créant un effet d'élastique à base de fonctions sinusoïdales ;
  • Back : formule créant un aller-retour aux extrémités à partir de puissances de 2 et de coefficients particuliers ;
  • Bounce : formule créant un effet de rebonds à partir d'une série de sous-formules à base de puissances de 2.


Les courbes mises en œuvre ressembleront à celles-ci :


La première ligne correspond à la catégorie Quad : les autres catégories utilisant des degrés accentuent simplement les effets obtenus.

Toutes ces catégories prendront des paramètres similaires déduits du fonctionnement d'une interpolation. La base est évidemment la formule toute simple de l'interpolation linéaire habituelle sans application d'une fonction d'easing :

Pseudo-code :

Code : Sélectionner tout
1
2
3
4
5
6
fonction EaseNone 
// pas de fonction d'easing 
Paramètres en entrée : AStart, AChange, AStep, ADuration : réels 
Sortie : Result : réel 
 
Result = AChange * AStep / ADuration + AStart

En Pascal, nous aurons :

Code delphi : Sélectionner tout
1
2
3
4
5
function EaseNone(AStart, AChange, AStep, ADuration: Single): Single; 
// *** pas de fonction ease *** 
begin 
  Result := AChange * AStep / ADuration + AStart; 
end;

Nous retrouvons :

  • le point de départ : AStart ;
  • le point d'arrivée : AChange ;
  • le pas (ou intervalle de temps) : AStep ;
  • la durée totale de l'interpolation : ADuration.


La formule, encore une fois, ne fait qu'exprimer un pourcentage de réalisation de la valeur finale auquel on aura ajouté la valeur de départ.

Dans le prochain épisode, nous mettrons en place l'interface d'une petite application pour illustrer ces fonctions que nous implémenterons progressivement. Stay tuned!

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