Les interpolations et fonctions d'easing avec Lazarus III - Les courbes d'easing
Un billet de Gilles VASSEUR
Le 16/01/2019, par gvasseur58, Responsable Lazarus & Pascal
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 :
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 :
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 :
En Pascal, nous aurons :
Nous retrouvons :
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!
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 : |
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 : |
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!