Voir le flux RSS

Blog de Gilles Vasseur - Pascal et compagnie

[Actualité] Les interpolations et fonctions d'easing avec Lazarus III - Les courbes d'easing

Noter ce billet
par , 16/01/2019 à 11h25 (1039 Affichages)
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 :

Nom : typescourbes.png
Affichages : 745
Taille : 3,3 Ko

À 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 :

Nom : courbes2.png
Affichages : 879
Taille : 47,2 Ko

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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
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!

Envoyer le billet « Les interpolations et fonctions d'easing avec Lazarus III - Les courbes d'easing » dans le blog Viadeo Envoyer le billet « Les interpolations et fonctions d'easing avec Lazarus III - Les courbes d'easing » dans le blog Twitter Envoyer le billet « Les interpolations et fonctions d'easing avec Lazarus III - Les courbes d'easing » dans le blog Google Envoyer le billet « Les interpolations et fonctions d'easing avec Lazarus III - Les courbes d'easing » dans le blog Facebook Envoyer le billet « Les interpolations et fonctions d'easing avec Lazarus III - Les courbes d'easing » dans le blog Digg Envoyer le billet « Les interpolations et fonctions d'easing avec Lazarus III - Les courbes d'easing » dans le blog Delicious Envoyer le billet « Les interpolations et fonctions d'easing avec Lazarus III - Les courbes d'easing » dans le blog MySpace Envoyer le billet « Les interpolations et fonctions d'easing avec Lazarus III - Les courbes d'easing » dans le blog Yahoo

Mis à jour 16/01/2019 à 11h37 par gvasseur58

Catégories
Free Pascal , Lazarus , Graphisme

Commentaires