jQuery: personalizzare l'easing

jQuery ci permette di modificare anche il suo funzionamento interno consentendo l'accesso ai suoi oggetti core. Uno di questi oggetti è appunto easing, che controlla gli effetti di easing sulle animazioni. Questo oggetto può essere esteso definendo i nostri valori di easing personalizzati che prendono la forma di metodi di tale oggetto. Vediamo insieme i dettagli.

La sintassi di base è la seguente:


jQuery.extend(jQuery.easing, {
	
	nomeEffetto: function(x, t, b, c, d) {
	
	  return espressione;
	
	}

});

I parametri che ci interessano del metodo che definiremo sono:

  1. t: tempo corrente
  2. b: valore iniziale
  3. c: valore modificato
  4. d: durata

Il metodo dovrà restituire un'espressione matematica che opera sui quattro parametri dell'animazione. Per esempio:


jQuery.extend(jQuery.easing, {
	
	moveAway: function(x, t, b, c, d) {
	
	  return (c - b) * (d / t);
	
	}


});

Quindi possiamo usare il nuovo easing moveAway con il metodo animate():


$(function() {

  $('#test').click(function() {
  
    $(this).animate({
     width: 200,
     height: 200,
     left: 200,
     visibility: 'toggle'
    }, 1000, 'moveAway');
  
  
  });


});

Vi consiglio di studiare il codice sorgente del plugin Easing per rendervi conto dei principali valori di easing possibili e, soprattutto, per studiare le espressioni matematiche usate.

Potete visualizzare l'esempio finale in questa pagina.

Torna su