jquery <h1> - Cos'è una funzione di andamento?




description lunghezza (5)

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 oggetto?


Answers

È 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


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 question 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;
}
<div id="box"></div>

Ora, aggiungiamo l'andamento. Iniziamo in modo semplice usando linear (no-easing). Risulterà la stessa animazione sopra, ma l'approccio è diverso. Questa volta, non modificheremo direttamente la variabile di posizione. Quello che modificheremo è il tempo.

function linear(time, begin, change, duration) {
    return change * (time / duration) + start;
}

Innanzitutto, parliamo dei parametri.

  • time : il tempo trascorso
  • begin : valore iniziale di una proprietà (larghezza, sinistra, margine, opacità, ecc.)
  • change : spostamento, (valore finale - valore iniziale)
  • duration : tempo totale che l'animazione impiegherà

time e la duration sono direttamente correlati. Se si dispone di un'animazione di 2 secondi, si aumenta il time e lo si passa alla funzione di andamento linear . La funzione restituirà una posizione che indica che la casella deve trovarsi in quella posizione nel momento indicato.

Diciamo che sto spostando una casella da 0 a 100 in 2 secondi. Se voglio ottenere la posizione della scatola, diciamo al 700 millisecondo, chiamerei la funzione linear nel modo seguente:

linear(0.7, 0, 100, 2);

che restituirebbe 35 . 700 millisecondi dopo l'inizio dell'animazione, la posizione della scatola sarà 35px. Vediamo questo in azione.

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 timeIncrement = duration / iterations;
var position      = 0;
var time          = 0;

function move() {
	time += timeIncrement;
	position = linear(time, startPosition, distance, duration);
	if (position >= endPosition) {
		clearInterval(handler);
		box.style.left = endPosition + "px";
		return;
	}
	box.style.left = position + "px";
}

var handler = setInterval(move, 1000/fps);

function linear(time, begin, change, duration) {
	return change * (time / duration) + begin;
}
body {
	background: gainsboro;
}
#box {
	width: 100px;
	height: 100px;
	background: white;
	box-shadow: 1px 1px 1px rgba(0,0,0,.2);
	position: absolute;
	left: 0;
}
<div id="box"></div>

Il parth che richiede attenzione in questo codice è:

var timeIncrement = duration / iterations;
var time = 0;

function move() {
    time += timeIncrement;
    position = linear(time, startPosition, distance, duration);
    // ...

Nella prima animazione, abbiamo modificato direttamente la variabile di posizione. Avevamo bisogno di un valore di incremento della posizione costante. Il modo in cui abbiamo calcolato è posIncrement = distance / iterations . Con l'easing, non modifichiamo più la variabile di posizione, ma la variabile temporale. Quindi abbiamo bisogno di un valore di incremento del tempo. Lo calcoliamo nello stesso modo in cui abbiamo incrementato la posizione, solo che questa volta dividiamo la duration per iterations . Aumentiamo il tempo con l'incremento del tempo e passiamo il tempo alla funzione di andamento, e la funzione di andamento ci restituisce la posizione successiva che la scatola dovrebbe occupare.

total distance / iterations (frames) = position change per frame
total duration / iterations (frames) = time change per frame

Ecco alcuni grafici per l'occhio.

E infine, un esempio di facilitàInOutQuad.

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 timeIncrement = duration / iterations;
var time          = 0;
var position      = 0;

function move() {
  time += timeIncrement;
  position = easeInOutQuad(time, startPosition, distance, duration);
  if (position >= endPosition) {
    clearInterval(handler);
    box.style.left = endPosition + "px";
    return;
  }
  box.style.left = position + "px";
}

var handler = setInterval(move, 1000 / fps);

function easeInOutQuad(t, b, c, d) {
  if ((t /= d / 2) < 1) {
    return c / 2 * t * t + b;
  } else {
    return -c / 2 * ((--t) * (t - 2) - 1) + b;
  }
}
body {
	background: gainsboro;
}
#box {
	width: 100px;
	height: 100px;
	background: white;
	box-shadow: 1px 1px 1px rgba(0,0,0,.2);
	position: absolute;
	left: 0;
}
<div id="box"></div>


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.


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.


Apparentemente commentando il commento di felixthehat ha richiesto una certa reputazione.

Ma vorrei mettere in secondo piano la sua chiamata per i trigger di eventi / proprietà ... Il framework Triggers in WPF mi consente di fare cose davvero potenti come un interaction designer senza dover immergermi nel codice. Mi manca.







jquery silverlight flex animation dojo