jQuery.easing - easeOutCubic - enfatizzando sulla facilità

Question

Sto utilizzando il plugin di jQuery easing di Robert (http://gsgd.co.uk/sandbox/jquery/easing/) e ho bisogno di enfatizzare o trascinare l'effetto easy.

Fondamentalmente, io voglio l'effetto facilità per essere davvero veloce ma poi rallentare notevolmente durante la facilità fuori.

credo che posso farlo utilizzando jQuery.easing.easeOutCubic(null, current_time, start_value, end_value, total_time) ma non riesco a capire come usarlo correttamente.

Come può essere ottenuto?

Answer 1

non avete bisogno di un plugin di andamento necessarie per fare andamento personalizzata con jQuery. Hai solo bisogno del codice JavaScript sorgente di una funzione di andamento che intendi utilizzare.

Ecco la funzione easeOutCubic ottenuto dal codice sorgente jQuery UI. Vedi this thread for more.

$.easing.easeOutCubic = function (x, t, b, c, d) { 
    return c*((t=t/d-1)*t*t + 1) + b; 
} 

Ora è possibile modificare la funzione e/o rinominarlo ...

$.easing.myEasing = function (x, t, b, c, d) { 
    return c*((t=t/d-1)*t*t + 1) + b; 
} 

(Tutti i seguenti esempi usano un 375 pixel quadrati blu con un slideToggle() 3 secondi di durata. È è possibile modificare la durata di 3 secondi (3000 ms) per dimostrare l'effetto a proprio piacimento.Io ho scelto 3 secondi per renderlo abbastanza lento per vedere le differenze.)

Quindi basta inserirlo nel jQuery, qualcosa come questo forse ...

$(document).ready(function(){ 

     $.easing.myEasing = function (x, t, b, c, d) { 
      return c*((t=t/d-1)*t*t + 1) + b; 
     } 

     $("#button").click(function() { 
      $('#myDiv').slideToggle(
       3000, // <-- Animation Duration (3000 ms) 
       'myEasing' // <-- the Name of your easing function 
      ); 
     }); 

}); 

Ecco una demo del codice di cui sopra, che contiene la funzione easeOutCubic rinominato come myEasing e applicato a un cubo slideToggle() con una seconda durata di 3.

http://jsfiddle.net/kJZxQ/

Ok, ora al tuo problema: "... l'effetto facilità per essere davvero veloce ma poi rallentare notevolmente durante la facilità fuori" Lei ha detto che si desidera

Ecco un grafico di easeOutCubic:

Hai due opzioni, è possibile manipolare l'equazione easing stesso o si può vedere se qualche altra funzione di andamento ha una curva simile, ma più ripido (più veloce) fino a la parte della facilità.

Questa pagina demo mostra visivamente tutte le curve di andamento ...

http://api.jqueryui.com/easings/

Come si può vedere, più curve sono modellati in modo simile a (7) - easeOutCubic ancora sono più ripida sul front-end. Ecco alcuni esempi ...

---

(10) - easeOutQuart easeOutQuart Demo

---

(13) - easeOutQuint easeOutQuint Demo

---

(16) - easeOutExpo Demo

---

Sembra che l'ultimo, easeOutExpo è la più ripida funzione di azione disponibili. Confrontando le differenze nelle equazioni contenute sopra, possiamo anche manipolare l'equazione easeOutExpo per rendere la curva ancora più profonda.

Questa equazione personalizzato è ridicolmente veloce e poi rallenta enormemente ...

http://jsfiddle.net/kJZxQ/11/

Ancora più estremo di quello precedente ...

http://jsfiddle.net/kJZxQ/12/

Durata aumentata rispetto allo scorso demo a 6 secondi per esagerare l'effetto ...

http://jsfiddle.net/kJZxQ/13/

Confrontando le equazioni matematiche delle dimostrazioni precedenti, è possibile vedere quale variabile viene manipolata per migliorare l'effetto e apportare le proprie regolazioni fini di conseguenza.

Penso davvero che easeOutExpo sia più simile a quello che descrivi. Essenzialmente, è la tua equazione easeOutCubic ma solo più veloce nella parte anteriore e più lenta alla fine.