Quelles sont les fonctions d'assouplissement?

15

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

entrez la description de l'image ici

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.

Daniel Kaplan
la source
2
L'interpolation est un terme connexe important. Voir également cette vidéo youtube.com/watch?v=Fy0aCDmgnxg où vous pouvez voir à quel point l'effet des fonctions d'interpolation et d'accélération est énorme!
Roy T.

Réponses:

13

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.

Ingénieur
la source
1
btw Easing est la deuxième diapositive du lien GreenSock. Utilisez le menu déroulant sur la diapositive pour tester différentes fonctions d'accélération.
jhocking
8

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:

entrez la description de l'image ici

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:

entrez la description de l'image ici

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

Vaughan Hilts
la source
@tieTYT J'ai ajouté une explication pour vous. Quel type d'exemple recherchez-vous?
Vaughan Hilts
Voir ma mise à jour. Si vous pouvez expliquer comment utiliser les fonctions qui ne prennent kque comme paramètre, j'accepterai cette réponse. Merci
Daniel Kaplan
Ces fonctions ne prennent pas seulement k. Les fonctions de début utilisent celles-ci qui sont ensuite transmises à des fonctions plus compliquées. Êtes-vous simplement intéressé par la mise en œuvre des phaseurs?
Vaughan Hilts
On dirait qu'ils kme prennent tous . Où voyez-vous autrement?
Daniel Kaplan
Toutes les fonctions d'accélération (sauf peut-être les interpolations de style «shake») nécessitent un minimum de trois paramètres. Heure (généralement un rapport entre 0 et 1), une valeur de début et une valeur de fin. Parfois, l'heure est divisée en deux paramètres tels que l'heure actuelle et la durée de la facilité. Si des valeurs de début et de fin ont déjà été définies (en fonction de votre système / bibliothèque d'accélération), vous n'aurez peut-être qu'à passer le temps, mais je n'en connais pas moi-même. Par exemple, si je voulais la valeur entre 10 et 30 à 75% du trajet (3 secondes dans une facilité de 4 secondes), je dois passer les 10 et 30, et aussi les 75% (temps / dur).
Doug.McFarlane
2

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.

ino
la source
Oh, alors maintenant vous avez changé votre réponse pour refléter la mienne! Très bon de voir que vous apprenez.
Ingénieur
Cette réponse ressemble plus à une référence qu'à un tutoriel. J'ai besoin d'exemples pour mieux comprendre
Daniel Kaplan
@NickWiggill non, je n'ai même pas vu votre réponse jusqu'à présent.
ino