Quali sono le funzioni di allentamento?

Ho trovato questo fantastico sito Web per lo sviluppo di giochi e ha un elenco di funzioni di semplificazione:

Sebbene il sito contenga una descrizione di ciò a cui servono, mi passa per la testa. Cosa sono le funzioni di allentamento e a cosa servono?

Aggiornare

Ho trovato un esempio migliore delle funzioni stesse dal codice sorgente di Phaser.io . Queste funzioni sono molto più semplici di quanto suggeriscano le risposte qui. Prendono un solo parametro, k. Come parte della risposta, vorrei sapere come usarli.

Le funzioni di andamento vengono utilizzate per l'interpolazione, in genere (ma non necessariamente) nell'animazione / movimento cinematico. L'interpolazione lineare (lerp) è qualcosa di cui potresti aver sentito parlare. Supponiamo che tu faccia una faccina sorridente da un angolo dello schermo all'altro (come per la tua immagine). Ciò significa che lo smiley si sposterà a una velocità costante dal punto A al punto B. Se dovessi applicarlo al movimento di un arto, sembrerebbe molto robotico e innaturale - gli attuatori / servi che i robot usano, funzionano in questo modo. Ovviamente, gli arti umani si muovono in un modo molto diverso. E la maggior parte del movimento che vedrai in natura avrà interessanti curve di movimento, piuttosto che la velocità costante e immutabile vista nell'interpolazione lineare.

Inserisci facilitazione. Allentare il movimento significa che la velocità non è costante. Ciò che ottiene è apparire più realistico. Guarda le persone, guarda diversi animali, osserva le piante che si piegano nel vento o anche come la pioggia che cade cambia direzione in una giornata raffinata. Guarda la velocità di una palla mentre la sollevi in ​​aria e rientra di nuovo. Guarda il movimento di una corda di chitarra mentre la pizzichi. Ognuno di questi tipi di movimento ha una curva diversa che descrive la velocità.

Ti suggerisco di giocare con GSAP online di GreenSock per avere un'idea di ciò che i diversi tipi di curve di allentamento producono in termini di movimento. È una di quelle cose in cui ci vuole tempo e pratica per mappare una particolare curva con nome al tipo di movimento che immagini di desiderare. Ma una volta che avrai compreso le basi, ti divertirai molto.

PS Come ho detto, l'allentamento non viene utilizzato solo per l'animazione. Può essere utilizzato per la panoramica del suono, per eseguire il movimento scheletrico a livello logico / modello o qualsiasi altra cosa a cui si possa pensare che potrebbe richiedere specifiche variazioni regolari nel tempo.

Una funzione di andamento ti permette di interpolare i valori da un valore all'altro in un dato intervallo usando qualcosa chiamato "funzione di andamento". Queste sono funzioni progettate per assumere un valore e in un dato punto dell'intervallo, emettere il valore in un determinato momento.

Questo può essere spiegato meglio dando un'occhiata a uno snippet di codice:

// simple linear tweening - no easing, no acceleration


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

@t è l'ora (o la posizione) corrente dell'interpolazione. Può trattarsi di secondi o frame, passi, secondi, ms, qualunque cosa - purché l'unità sia la stessa utilizzata per il tempo totale

@b è il valore iniziale della proprietà.

@c è la modifica tra il valore iniziale e quello di destinazione della proprietà.

@d è il tempo totale dell'interpolazione.

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

Questa è la definizione di una funzione di andamento lineare. Graficamente questo nel tempo in termini di 't' otteniamo un semplice grafico lineare.

Va bene, d'accordo. Per cosa possiamo usarli?

Ogni volta che hai in mente un inizio e una fine e desideri animarli, puoi utilizzare una "interpolazione" o una "funzione di andamento".

Ad esempio, ecco una GIF che ho appena fatto di Angry Birds:

Notare che il menu scorre verso il punto dello schermo, ma si ferma lentamente? Ciò è dovuto a una funzione di allentamento che si inserisce facilmente. Puoi vederli in tutto il Web. Se questa fosse una facilità lineare, sarebbe sempre la stessa.

Musica?

Sicuro! Se prendiamo il valore del nostro attuale valore della colonna sonora e lo interpoliamo tra quello e 0 su un totale di t di dire, 1 secondo, il nostro volume si attenuerà lentamente per un periodo di un secondo.

Oggetti limitanti

Ci sono anche funzioni che consentono il rimbalzo (vedi: http://easings.net/#easeOutBounce ) che possono produrre effetti come questo su uno sprite senza alcun sistema fisico:

Puoi trovare ulteriori informazioni sul Web cercando l'interpolazione.

Le funzioni di andamento servono a modificare un valore durante un periodo di tempo, da un numero iniziale a un numero finale.

Utilizzi quel valore per animare una proprietà di un oggetto nel tuo gioco, come posizione, rotazione, scala, modifica dei colori e altre proprietà che usano un valore.

Le diverse funzioni di andamento determinano la "sensazione" dell'animazione o come il valore cambia nel tempo.

Sul sito Web che hai pubblicato, il grafico mostra il valore che cambia nel tempo dall'inizio alla fine, quindi non significa che l'oggetto che stai animando seguirà il percorso della palla nel grafico.