Cos’è una funzione di andamento?

Cosa si intende per funzione di andamento nel contesto dell’animazione. Sembra che dojo, jquery, silverlight, flex e altri sistemi di interfaccia utente abbiano la nozione di funzione di andamento. Non sono riuscito a trovare una buona spiegazione delle funzioni di andamento? Qualcuno può spiegare il concetto di funzioni di andamento, o indicare una buona spiegazione di esse, sono interessato al concetto non nei dettagli specifici di un quadro?

L’easing è strettamente utilizzato per la posizione o è generale e può essere applicato a qualsiasi proprietà di un object?

Una funzione di andamento è solitamente una funzione che descrive il valore di una proprietà data una percentuale di completezza. Strutture diverse usano variazioni leggermente diverse, ma il concetto è facile da afferrare una volta ottenuta l’idea, ma probabilmente è meglio dare qualche esempio.

Per prima cosa guardiamo all’interfaccia che tutte le nostre funzioni di easing si attengono.

Le nostre funzioni di easing prenderanno diversi argomenti:

  • percentuale completa: (da 0.0 a 1.0 ).
  • elaspedTime: il numero di millisecondi in cui è stata eseguita l’animazione
  • startValue: il valore da cui iniziare (o il valore quando la percentuale completa è 0%)
  • endValue: il valore da terminare a (o il valore quando la percentuale di completamento è 100%)
  • totalDuration: la lunghezza totale desiderata dell’animazione in millisecondi

E restituirà un numero che rappresenta il valore a cui deve essere impostata la proprietà.

Nota: questa è la stessa firma utilizzata da jQuery per le sue funzioni di andamento, che prenderò in prestito per esempi.

Il più facile da capire è una facilità lineare:

 var linear = function(percent,elapsed,start,end,total) { return start+(end-start)*percent; } 

E ora per mettere questo da usare:

Diciamo che avremmo avuto un’animazione che andava avanti per 1000 millisecondi e doveva iniziare a 0 e terminare a 50. Passando questi valori nella nostra funzione di andamento dovrebbe dirci quale dovrebbe essere il valore effettivo:

 linear(0, 0, 0,50, 1000) // 0 linear(0.25, 250, 0, 50, 1000) // 12.5 linear(0.5, 500, 0, 50, 1000) // 25 linear(0.75, 750, 0, 50, 1000) // 37.5 linear(1.0, 1000, 0, 50, 1000) // 50 

Questa è un’interpolazione piuttosto diretta (senza gioco di parole). È una semplice interpolazione lineare. Se dovessi calcolare il valore del grafico rispetto al tempo, sarebbe una linea retta:

Facilità lineare

Diamo un’occhiata a una funzione di andamento un po ‘più complicata, una facilità quadradica in:

 var easeInQuad = function (x, t, b, c, d) { return c*(t/=d)*t + b; } 

E guardiamo gli stessi risultati, usando gli stessi input di prima:

 easeInQuad(0, 0, 0, 50, 1000) // 0 easeInQuad(0.25, 250, 0, 50, 1000) // 3.125 easeInQuad(0.5, 500, 0, 50, 1000) // 12.5 easeInQuad(0.75, 750, 0, 50, 1000) // 28.125 easeInQuad(1, 1000, 0, 50, 1000) // 50 

Si noti che i valori sono molto diversi dalla nostra semplicità lineare. Inizia molto lentamente, quindi accelera fino al suo punto finale. Al completamento del 50% dell’animazione, è stato portato a un valore di 12,5, che corrisponde a un quarto della distanza effettiva tra i valori start e end specificati.

Se dovessimo rappresentare graficamente questa funzione, sarebbe simile a questa:

Quad-Ease-in

Ora diamo un’occhiata a un semplice allentamento:

 var easeOutQuad = function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }; 

Questo essenzialmente fa la curva di accelerazione “opposta” di una facilità dentro. Comincia velocemente e poi decelera fino al suo valore finale:

Facilità

E poi ci sono funzioni che facilitano sia dentro che fuori:

 var easeInOutQuad = function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }; 

easeInOut

Questa funzione inizierà lentamente e finirà lentamente, raggiungendo la sua velocità massima nel mezzo.

Ci sono un po 'di attenuazione / interpolazioni che puoi usare: Lineare, Quadradico, Cubico, Quart, Quint, Seno. E ci sono funzioni di attenuazione speciali come Bounce ed Elastic, che hanno le loro.

Ad esempio, una facilità elastica in:

 var easeInElastic = function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*ds)*(2*Math.PI)/p )) + b; }, 

Facilità elastica in

Forse qualcun altro può spiegare l'effettiva parte matematica dietro l'interpolazione, perché onestamente non sono un mago della matematica. Ma questo è il principio base delle stesse funzioni di andamento.

Quando si avvia un'interpolazione / animazione, il motore di animazione memorizza i valori iniziali e finali desiderati. Quindi, ogni volta che si aggiorna, i suoi dati su quanto tempo è passato. Chiama la funzione di andamento fornita con i valori per determinare il valore su cui la proprietà deve essere impostata. Finché tutte le funzioni di andamento implementano la stessa firma, possono essere sostituite con facilità e il motore di animazione principale non deve conoscere la differenza. (Che rende un'eccellente separazione delle preoccupazioni).

Noterai che ho evitato di parlare esplicitamente delle posizioni y , perché l'easing non ha nulla a che fare specificamente con la posizione di per sé . Una funzione di andamento definisce solo una transizione tra un valore iniziale e uno finale. Quelli potrebbero essere le coordinate x , o un colore, o la trasparenza di un object.

E in effetti, in teoria, è ansible applicare diverse funzioni di andamento per interpolare per diverse proprietà. Spero che questo aiuti a far luce sull'idea di base.

Ed ecco un esempio davvero interessante (che usa una firma leggermente diversa, ma è lo stesso principale) con cui giocare per avere l'idea di come l'easing si rapporta alla posizione.


modificare

Ecco un piccolo jsFiddle che ho buttato insieme per dimostrare alcuni degli usi di base in javascript. Si noti che la proprietà top viene interpolata utilizzando il rimbalzo e la proprietà left viene interpolata utilizzando un quad. Usa il cursore per simulare il ciclo di rendering.

Dal momento che tutte le funzioni nell'object easing hanno la stessa firma, è ansible scambiarle a vicenda. Al momento la maggior parte di queste cose sono tutte codificate (cose come valori iniziali e finali, le funzioni di interpolazione utilizzate e la lunghezza dell'animazione), ma in un esempio reale di un helper di animazione, dovresti passare nelle seguenti proprietà:

  • La proprietà da cambiare
  • Il valore iniziale (o se lasciato undefined allora usa il suo valore corrente)
  • Il valore finale
  • La lunghezza dell'animazione dovrebbe essere
  • Il riferimento alla funzione di tweening che si desidera utilizzare.

Il motore di animazione manterrà traccia di queste impostazioni per la durata dell'animazione e durante ogni ciclo di aggiornamento, utilizzerà l'argomento di interpolazione per calcolare il nuovo valore delle proprietà.

Una funzione di andamento è un algoritmo che controlla la velocità di un’animazione per dare un effetto desiderato (rimbalzare, ingrandire e rallentare, ecc.).

Scopri cosa MSDN ha da dire su di loro per un po ‘più di dettaglio.

Vorrei pubblicare la mia risposta a questa vecchia domanda anche se ha una risposta accettata. 32bitkid ha fatto la spiegazione necessaria. Quello che aggiungerò è l’implementazione pratica di base, perché non ho potuto trovarne una (che ho anche postato una domanda al riguardo).

Prendi questa semplice animazione lineare, per esempio. Dubito che richieda spiegazioni poiché il codice è auto-esplicativo. Calcoliamo un valore di incremento costante che non cambia nel tempo e ad ogni iterazione, aumentiamo la posizione della scatola. Stiamo modificando direttamente la variabile di posizione e quindi applicandola sulla casella.

JSFiddle

 var box = document.getElementById("box"); var fps = 60; var duration = 2; // seconds var iterations = fps * duration; // 120 frames var startPosition = 0; // left end of the screen var endPosition = window.innerWidth - box.clientWidth; // right end of the screen var distance = endPosition - startPosition; // total distance var posIncrement = distance / iterations; // change per frame var position = startPosition; // current position function move() { position += posIncrement; // increase position if (position >= endPosition) { // check if reached endPosition clearInterval(handler); // if so, stop interval box.style.left = endPosition + "px"; // jump to endPosition return; // exit function } box.style.left = position + "px"; // move to the new position } var handler = setInterval(move, 1000/fps); // run move() every 16~ millisecond 
 body { background: gainsboro; } #box { width: 100px; height: 100px; background: white; box-shadow: 1px 1px 1px rgba(0,0,0,.2); position: absolute; left: 0; } 
 

È una transizione di proprietà (dimensione, forma, posizione) da uno stato all’altro.

Ecco alcuni piccoli grafici che descrivono le funzioni di andamento offerte da jquery ui.

http://jqueryui.com/demos/effect/easing.html

Pensa nella vita reale non funziona come un computer. I pensieri non passano da on a off e da off a on immediatamente come se non potessi fingere che la tua ragazza ti amerà immediatamente. Quindi gli scienziati e le persone informatiche (che non sanno nulla della tua ragazza), hanno inventato funzioni di alleggerimento. È come applicare o cambiare elementi come le animazioni non in modo immediato. Quindi se muovi un rettangolo da sinistra a destra non si muove come un robot: “inizia, muovi con una velocità costante e fermati immediatamente”, ma “Inizia, aumenta la velocità costantemente, diminuisci costantemente la velocità e fermati definitivamente”. Così l’alleggerimento è come lasciare che alcune animazioni, funzioni, oggetti o cose si comportino come cose nella vita reale. Ogni effetto di facilitazione definisce un comportamento, ecco perché abbiamo effetti di facilità “elastici”, “rimbalzanti” e così via.