Formule d'animation facilitant et facilitant

Question

Dites, si je fais le soulagement puis/ l'animation Ease-In du mouvement d'un objet de la coordonnée X1 à la coordonnée X2 sur S étapes à intervalles égaux. Certains peuvent-ils suggérer la formule pour calculer les coordonnées X de ce mouvement?

Answer 1

Sortie quadratique où t = temps, b = valeur initiale, c = changement de valeur, d = durée:

 function (float time, float startValue, float change, float duration) {
     time /= duration / 2;
     if (time < 1)  {
          return change / 2 * time * time + startValue;
     }

     time--;
     return -change / 2 * (time * (time - 2) - 1) + startValue;
 };

source: http://gizma.com/easing/

Answer 2

En fait, je préférerais utiliser une fonction qui obtient un temps dans [0; 1] et afficher une heure dans [0; 1], afin que nous puissions appliquer le résultat à n’importe quel type (vecteur 2D, vecteur 3D, ...).

Solution 1

Pour l’accélération quadratique avant/arrière, la courbe est séparée en deux fonctions en fonction de t:

• lorsque t <0.5: f(t) = square(t)
• quand t> = 0.5: f(t) = 1 - square(t - 1) + 0.5

Après réduction, en C, cela donnerait ceci:

float InOutQuadBlend(float t)
{
    if(t <= 0.5f)
        return 2.0f * square(t);
    t -= 0.5f;
    return 2.0f * t * (1.0f - t) + 0.5;
}

Solution 2 (Bézier)

Une autre courbe de mélange intéressante est celle donnée par Bézier, qui a l'avantage d'être tout à fait optimisée (no if). Vous pouvez vérifier la courbe sur Wolfram . Et voici le code C:

float BezierBlend(float t)
{
    return square(t) * (3.0f - 2.0f * t);
}

Solution 3 (fonction paramétrique)

Modifier:
Une autre méthode proposée par @DannyYaroslavski est la formule simple proposée ici .

Il est paramétrique et obtient une accélération et une décélération Nice in/out.

Avec alpha = 2, vous obtenez cette fonction:

Ce qui se traduit en C comme ceci:

float ParametricBlend(float t)
{
    float sqt = square(t);
    return sqt / (2.0f * (sqt - t) + 1.0f);
}

Answer 3

J'ai eu le même problème: je voulais animer mon graphique (Ease in-out).

Le brainstorming m'a donné deux moyens:

1) Formule trygonométrique. Tout d'abord, j'ai écrit y=(sin(x/π*10-π/2)+1)/2, lequel analogique est sin^2((5*x)/π)

float TrygoEase (float x) {
    float y=(float)Math.pow(Math.sin(5*x/Math.PI),2);
    return y;
}

2) Deux paraboles. Ce n'était pas difficile. Je viens d'utiliser y=2*x*x sur [0;0.5] et y=-2(x-1)^2+1 sur [0.5;1]

float ParabolEase(float x) {
    float y=2*x*x;
    if(x>0.5f){
        x-=1;
        y=-2*x*x+1;
    }
    return y;
} 

Utilisez cette méthode pour x=[0;1], ce qui retourne également y=[0;1].

Maintenant, vous pouvez comparer ces graphiques: