Easing personalizzato e callback delle animazioni
Implementare funzioni di easing personalizzate per controllare velocità e andamento delle animazioni e utilizzare callback per eseguire codice esattamente al loro completamento o a ogni passaggio.
Easing personalizzato e callback delle animazioni è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.
Oltre la velocità di animazione di base
Le animazioni non riguardano solo lo spostamento degli elementi, ma anche il modo in cui si muovono. L'easing controlla l'accelerazione e la decelerazione di un'animazione, rendendola più naturale o più spettacolare.
jQuery offre due opzioni di easing integrate: 'linear' (velocità costante) e 'swing' (inizio lento, parte centrale veloce, fine lenta). Ma cosa fare se ne servono altre?
Esplorare l'easing predefinito
Vediamo la differenza tra le opzioni di easing predefinite di jQuery:
'linear': l'animazione si muove a velocità costante dall'inizio alla fine.'swing': è l'opzione predefinita. Inizia lentamente, accelera nella parte centrale e rallenta di nuovo alla fine.
Entrambe sono semplici, ma spesso si desidera avere un maggiore controllo sull'effetto dell'animazione.
Easing personalizzato con jQuery UI
Per ottenere effetti di easing più sofisticati, si utilizzano spesso i plugin. Una scelta molto diffusa è il componente jQuery UI Easing.
Estende l'oggetto $.easing di jQuery con molte nuove funzioni, come 'easeOutBounce', 'easeInOutQuad' e altre ancora. In questo modo si dispone di una ricca libreria di curve di movimento predefinite.
Per utilizzarle, in genere è necessario includere la libreria jQuery UI nel proprio progetto.
Demo del codice: rimbalzo con EaseOutBounce
Proviamo un'animazione con una funzione di easing personalizzata di jQuery UI. Noti come il riquadro rimbalzi alla fine, invece di fermarsi bruscamente. Questo effetto è ottenuto utilizzando 'easeOutBounce'.
(Nota: questo esempio presuppone che siano inclusi il core e gli effetti di jQuery UI.)
<!DOCTYPE html>
<html>
<head>
<title>Custom Easing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: #4CAF50;
position: relative;
left: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="startAnim">Animate</button>
<script>
$(document).ready(function() {
$("#startAnim").click(function() {
$("#box").animate({
left: '250px'
}, 1500, 'easeOutBounce'); // Using a jQuery UI easing
});
});
</script>
</body>
</html>Comprendere i callback delle animazioni
Le animazioni sono asincrone, cioè il codice continua a essere eseguito mentre si svolgono. E se fosse necessario eseguire un'operazione dopo la fine di un'animazione?
Il metodo .animate() di jQuery accetta una funzione di callback. Il callback più comune è complete.
- Il callback
completeviene eseguito una volta completata l'animazione sugli elementi selezionati. - È ideale per concatenare azioni o visualizzare un messaggio di operazione completata.
Demo del codice: il callback `complete`
Qui animeremo un riquadro, quindi ne cambieremo il colore di sfondo e mostreremo un messaggio solo dopo che l'animazione sarà completata al 100%.
In questo modo si garantiscono la coerenza visiva e la corretta temporizzazione delle azioni successive.
<!DOCTYPE html>
<html>
<head>
<title>Complete Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: #008CBA;
position: relative;
left: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="startAnim">Animate</button>
<p id="message"></p>
<script>
$(document).ready(function() {
$("#startAnim").click(function() {
$("#box").animate({
left: '250px'
}, 1000, function() { // This is the complete callback
$(this).css("background-color", "#f44336");
$("#message").text("Animation complete! Color changed.");
});
});
});
</script>
</body>
</html>Il callback `step`
A volte è necessario eseguire un'azione durante un'animazione, non solo alla fine. È in questo caso che entra in gioco il callback step.
Il callback step viene eseguito per ogni proprietà animata, a ogni passaggio dell'animazione. Viene richiamato continuamente mentre l'animazione è in esecuzione.
Riceve argomenti come now (il valore corrente della proprietà), fx (un oggetto contenente i dettagli dell'animazione) e tween (per un controllo più avanzato).
Demo del codice: il callback `step`
Utilizziamo il callback step per visualizzare la posizione corrente del riquadro animato mentre si sposta.
Questo mostra come ottenere aggiornamenti in tempo reale e reagire all'avanzamento dell'animazione. Utilizzeremo nello specifico l'argomento now.
<!DOCTYPE html>
<html>
<head>
<title>Step Callback</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: #FFC107;
position: relative;
left: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="startAnim">Animate</button>
<p>Current Left Position: <span id="position">0px</span></p>
<script>
$(document).ready(function() {
$("#startAnim").click(function() {
$("#box").animate({
left: '250px'
}, {
duration: 1500,
step: function(now, fx) { // This is the step callback
$("#position").text(now.toFixed(0) + "px");
}
});
});
});
</script>
</body>
</html>Utilizzare più callback
È possibile utilizzare entrambi i callback step e complete nella stessa animazione.
Il metodo animate() accetta un oggetto di opzioni come secondo argomento, nel quale è possibile definire duration, easing e le funzioni di callback.
Questo consente un controllo preciso: monitorare l'avanzamento durante l'animazione ed eseguire un'azione finale dopo la sua conclusione.
Verifica sui callback
Quale callback jQuery di animate() è più adatto per aggiornare continuamente una barra di avanzamento mentre è in esecuzione un'animazione?
Easing e callback: riepilogo
Ottimo lavoro! Ha imparato a potenziare le animazioni jQuery:
- Easing personalizzato: utilizzi plugin come jQuery UI per applicare curve di velocità più dinamiche rispetto a 'linear' o 'swing'.
- Callback
complete: esegua il codice esattamente quando un'animazione è terminata. - Callback
step: ottenga aggiornamenti in tempo reale ed esegua azioni ripetutamente durante l'avanzamento di un'animazione.
Questi strumenti offrono un controllo molto più preciso del flusso visivo e della temporizzazione interattiva degli elementi web.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 22
- Lezioni
- 48
Domande Frequenti
La lezione «Easing personalizzato e callback delle animazioni» è gratuita?
Sì — il testo completo di «Easing personalizzato e callback delle animazioni» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.
Cosa imparerò in «Easing personalizzato e callback delle animazioni»?
Implementare funzioni di easing personalizzate per controllare velocità e andamento delle animazioni e utilizzare callback per eseguire codice esattamente al loro completamento o a ogni passaggio. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.
Quanto tempo richiede la lezione «Easing personalizzato e callback delle animazioni»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione jQuery Academy?
Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Concatenamento e accodamento delle animazioni
- Easing personalizzato e callback delle animazioni
- Effetti avanzati di attivazione e scorrimento