Quelles sont les fonctions d'assouplissement?

J'ai trouvé ce site Web sympa pour le développement de jeux et il a une liste de fonctions d'accélération:

Bien que le site contienne une description de leur fonction, cela me dépasse. Quelles sont les fonctions d'accélération et à quoi servent-elles?

Mise à jour

J'ai trouvé un meilleur exemple des fonctions elles-mêmes à partir du code source de Phaser.io . Ces fonctions sont beaucoup plus simples que les réponses suggérées ici. Ils ne prennent qu'un seul paramètre, k. Dans le cadre de la réponse, j'aimerais savoir comment les utiliser.

Les fonctions d'accélération sont utilisées pour l'interpolation, généralement (mais pas nécessairement) en animation / mouvement cinématique. L'interpolation linéaire (lerp) est quelque chose dont vous avez peut-être entendu parler. Disons que vous lerp un visage souriant d'un coin de l'écran à un autre (un peu selon votre image). Cela signifie que le smiley se déplacera à une vitesse constante du point A au point B. Si vous appliquiez cela au mouvement d'un membre, il aurait l'air très robotique et contre nature - les actionneurs / servos que les robots utilisent, fonctionnent de cette façon. De toute évidence, les membres humains se déplacent d'une manière très différente. Et la plupart des mouvements que vous verrez dans la nature auront des courbes de mouvement intéressantes, plutôt que la vitesse constante et immuable observée en interpolation linéaire.

Entrez l'assouplissement. Le relâchement du mouvement signifie que la vitesse n'est pas constante. Cela permet de paraître plus réaliste. Observez les gens, observez différents animaux, regardez les plantes se plier dans le vent, ou même comment la pluie qui tombe change de direction un jour de rafales. Observez la vitesse d'une balle lorsque vous la jetez en l'air et que vous la redescendez. Regardez le mouvement d'une corde de guitare pendant que vous l'arrachez. Chacun de ces types de mouvement a une courbe différente décrivant la vitesse.

Je vous suggère de jouer avec le GSAP de GreenSock en ligne pour avoir une idée de ce que les différents types de courbes d'assouplissement produisent en termes de mouvement. C'est l'une de ces choses où il faut du temps et de la pratique pour mapper une courbe nommée particulière au type de mouvement que vous imaginez vouloir. Mais une fois que vous aurez compris les bases, vous vous amuserez beaucoup.

PS Comme je l'ai dit, l'assouplissement n'est pas seulement utilisé pour l'animation. Il peut être utilisé pour le panoramique sonore, pour effectuer un mouvement squelettique au niveau logique / modèle, ou tout autre élément auquel vous pouvez penser qui pourrait nécessiter une variation douce spécifique dans le temps.

Une fonction d'accélération vous permet d'interpoler des valeurs d'une valeur à une autre sur un intervalle donné en utilisant ce que l'on appelle une "fonction d'accélération". Ce sont des fonctions conçues pour prendre une valeur et à tout moment donné de l'intervalle, sortir la valeur à un certain moment.

Cela peut être mieux expliqué en jetant un œil à un extrait de code:

// simple linear tweening - no easing, no acceleration


Math.linearTween = function (t, b, c, d) {
    return c*t/d + b;
};

@t est l'heure (ou la position) actuelle de l'interpolation. Cela peut être des secondes ou des images, des pas, des secondes, des ms, peu importe - tant que l'unité est la même que celle utilisée pour le temps total

@b est la valeur de début de la propriété.

@c est le changement entre la valeur de début et la valeur de destination de la propriété.

@d est la durée totale de l'interpolation.

Merci, http://upshots.org/actionscript/jsas-understanding-easing

Il s'agit de la définition d'une fonction d'assouplissement linéaire. Représentant cela au fil du temps en termes de «t», nous obtenons un simple graphique linéaire.

D'accord, cool. À quoi pouvons-nous les utiliser?

Chaque fois que vous avez un début et une fin en tête et que vous souhaitez les animer, vous pouvez utiliser une "interpolation" ou une "fonction d'accélération".

Par exemple, voici un GIF que je viens de prendre d'Angry Birds:

Remarquez que le menu glisse jusqu'au point de l'écran, mais il s'arrête lentement? Cela est dû à une fonction d'assouplissement qui se met en place. Vous pouvez les voir partout sur le Web. S'il s'agissait d'une facilité linéaire, ce serait la même partout.

La musique?

Sûr! Si nous prenons la valeur de notre valeur de bande sonore actuelle et l'interpolons entre cela et 0 sur un total de t disons, 1 seconde, alors notre volume disparaîtra lentement sur une période d'une seconde.

Objets englobants

Il existe également des fonctions qui permettent le rebond (voir: http://easings.net/#easeOutBounce ) qui peuvent produire des effets comme celui-ci sur un sprite sans aucun système physique:

Vous pouvez trouver plus d'informations sur le Web en recherchant l'interpolation.

Les fonctions d'accélération servent à changer une valeur pendant une période de temps, d'un numéro de départ à un numéro de fin.

Vous utilisez cette valeur pour animer une propriété d'un objet dans votre jeu, comme la position, la rotation, l'échelle, le changement de couleurs et d'autres propriétés qui utilisent une valeur.

Les différentes fonctions d'accélération déterminent la "sensation" de l'animation, ou comment la valeur change au fil du temps.

Sur le site Web que vous avez publié, le graphique montre la valeur changeant au fil du temps d'un début à une fin, donc cela ne signifie pas que l'objet que vous animez suivra le chemin de la balle dans le graphique.