Egendefinert easing og animasjonstilbakekall
Implementer egendefinerte easing-funksjoner for å styre animasjonens hastighet og forløp, og bruk tilbakekall for å kjøre kode nøyaktig når animasjoner fullføres eller går videre til neste trinn.
Egendefinert easing og animasjonstilbakekall er en gratis leksjon i jQuery Academy på CoddyKit. Dette er leksjon 2 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i jQuery Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Mer enn grunnleggende animasjonshastighet
Animasjoner handler ikke bare om å flytte elementer, men også om hvordan de beveger seg. Ease-funksjonen styrer akselerasjonen og nedbremsingen i en animasjon, slik at den ser mer naturlig eller dramatisk ut.
jQuery har to innebygde alternativer for easing: 'linear' (konstant hastighet) og 'swing' (langsom start, høy hastighet på midten og langsom avslutning). Men hva om De trenger mer?
Utforsk standardinnstillinger for easing
La oss se forskjellen mellom jQuerys standardalternativer for easing:
'linear': Animasjonen beveger seg med konstant hastighet fra start til slutt.'swing': Dette er standardalternativet. Animasjonen starter langsomt, øker hastigheten på midten og bremser igjen mot slutten.
Begge er enkle, men ofte ønsker De mer kontroll over hvordan animasjonen oppleves.
Tilpasset easing med jQuery UI
For å få mer avanserte easing-effekter bruker vi ofte programtillegg. Et populært valg er komponenten jQuery UI Easing.
Den utvider jQuerys $.easing-objekt med mange nye funksjoner, som 'easeOutBounce', 'easeInOutQuad' og flere. Dette gir Dem et rikt bibliotek med forhåndsdefinerte bevegelseskurver.
For å bruke dem må De vanligvis inkludere jQuery UI-biblioteket i prosjektet.
Kodeeksempel: Sprett med EaseOutBounce
La oss prøve en animasjon med en tilpasset easing-funksjon fra jQuery UI. Legg merke til hvordan boksen spretter på slutten i stedet for å stoppe brått. Denne effekten oppnås ved hjelp av 'easeOutBounce'.
(Merk: Dette eksempelet forutsetter at kjernen i jQuery UI og effektene er inkludert.)
<!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>Forstå tilbakeringinger i animasjoner
Animasjoner er asynkrone, noe som betyr at koden fortsetter å kjøre mens animasjonene pågår. Hva om De må gjøre noe etter at en animasjon er ferdig?
jQuerys .animate()-metode godtar en tilbakeringingsfunksjon. Den vanligste er complete-tilbakeringen.
complete-tilbakeringen kjøres én gang når animasjonen på de valgte elementene er helt ferdig.- Den passer perfekt for å kjede sammen handlinger eller vise en «ferdig»-melding.
Kodeeksempel: `complete`-tilbakeringen
Her animerer vi en boks og endrer deretter bakgrunnsfargen og viser en melding, men bare etter at animasjonen er 100 % ferdig.
Dette sikrer visuell konsistens og riktig timing for etterfølgende handlinger.
<!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>`step`-tilbakeringen
Noen ganger må De utføre en handling under en animasjon, ikke bare på slutten. Det er her step-tilbakeringen kommer inn.
step-tilbakeringen kjøres for hver animert egenskap ved hvert trinn i animasjonen. Den kalles kontinuerlig mens animasjonen kjører.
Den mottar argumenter som now (gjeldende verdi for egenskapen), fx (et objekt som inneholder animasjonsdetaljer) og tween (for mer avansert kontroll).
Kodeeksempel: `step`-tilbakeringen
La oss bruke step-tilbakeringen til å vise den gjeldende plasseringen til den animerte boksen mens den beveger seg.
Dette viser hvordan De kan hente oppdateringer i sanntid og reagere på animasjonens fremdrift. Vi bruker spesifikt now-argumentet.
<!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>Bruke flere tilbakeringinger
De kan bruke både step- og complete-tilbakeringingene i samme animasjon.
animate()-metoden godtar et alternativobjekt som sitt andre argument. Der kan De definere både duration, easing og tilbakeringingsfunksjoner.
Dette gir presis kontroll: De kan følge med på fremdriften under animasjonen og utføre en avsluttende handling etter at den er ferdig.
Kontroll av tilbakeringinger
Hvilken jQuery-tilbakeringing for animate() egner seg best til å oppdatere en fremdriftsindikator kontinuerlig mens en animasjon kjører?
Easing og tilbakeringinger: Sammendrag
Godt jobbet! De har lært hvordan De kan forbedre jQuery-animasjonene:
- Tilpasset easing: Bruk programtillegg som jQuery UI for å ta i bruk mer dynamiske hastighetskurver enn bare «linear» eller «swing».
complete-tilbakeringing: Kjør kode nøyaktig når en animasjon er ferdig.step-tilbakeringing: Få oppdateringer i sanntid og utfør handlinger gjentatte ganger mens animasjonen pågår.
Disse verktøyene gir Dem langt finere kontroll over den visuelle flyten og den interaktive timingen til nettelementene.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 22
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Egendefinert easing og animasjonstilbakekall» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien jQuery Academy, inkludert «Egendefinert easing og animasjonstilbakekall», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Egendefinert easing og animasjonstilbakekall»?
Implementer egendefinerte easing-funksjoner for å styre animasjonens hastighet og forløp, og bruk tilbakekall for å kjøre kode nøyaktig når animasjoner fullføres eller går videre til neste trinn. Du øver på jQuery Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med jQuery Academy?
Ingen tidligere erfaring er nødvendig. jQuery Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 3.
Hvor lang tid tar leksjonen «Egendefinert easing og animasjonstilbakekall»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne jQuery Academy-leksjonen?
Ja. Alle jQuery Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Kjeding og køsetting av animasjoner
- Egendefinert easing og animasjonstilbakekall
- Avanserte toggle- og slide-effekter