Timers & animations

Animatie

= updaten van een beeld in opeenvolgende beelden of frames

  • 🐌 Slechte timing leidt tot haperingen en laggy user experience
  • 🔋 Efficiënt gebruik van resources (CPU, batterij) is cruciaal
  • 📺 Vloeiende animaties synchroniseren met de scherm-refresh

Timing

3 belangrijke timing methods in JavaScript:

  • setTimeout(): code uitvoeren na vertraging
  • setInterval(): code herhaaldelijk uitvoeren
  • requestAnimationFrame(): synchroniseert met de browser's refresh rate

Éénmalige vertragingen

setTimeout()

setTimeout(() => {
  // code
}, 1000);

= Functie die een functie uitvoert na een ingestelde tijd

  • Parameter 1: functie
  • Parameter 2: aantal milliseconden

Voorbeelden setTimeout()

setTimeout(() => {
  const modal = document.querySelector("#modal");
  modal.style.display = "block";
}, 2000);
  • 🦶 Tutorial die stap voor stap verschijnt
  • 🔔 Notificatie na een tijd verwijderen
  • 🔄 Loading animation

clearTimeout()

const myTimeout = setTimeout(() => {}, 5000);

clearTimeout(myTimeout);

= Annuleert een eerder geplande setTimeout()

  • Parameter: Naam van de variabele waarin je setTimeout() hebt gedeclareerd.

Voorbeelden clearTimeout()

const timeoutId = setTimeout(() => {
  alert("Ben je er nog?");
}, 60000);

document.addEventListener("click", () => {
  clearTimeout(timeoutId);
});
  • ⬅️ Auto-redirect annuleren als een gebruiker interactie toont
  • 🔔 Pop-ups annuleren als ze niet meer relevant zijn

Acties herhalen

setInterval()

setInterval(() => {
  // code
}, 1000);

= Functie die een functie herhaaldelijk uitvoert met een vaste intervaltijd

  • Parameter 1: functie
  • Parameter 2: aantal milliseconden

Voorbeelden setInterval()

const clockElement = document.querySelector("#clock");

function updateClock() {
  const now = new Date();
  clockElement.textContent = now.toLocaleTimeString();
}

setInterval(updateClock, 1000);
  • ⏱️ Countdown voor aanbiedingen
  • 🔔 Notificatie-checks op de achtergrond
  • 📈 Auto-refresh van data, vb beurskoers

clearInterval()

const intervalId = setInterval(() => {}, 1000);

clearInterval(intervalId);

= Stopt een lopende setInterval() functie.

  • Parameter: Naam van de variabele waarin je setInterval() hebt gedeclareerd

Voorbeelden clearInterval()

let countdown = 10;
const element = document.getElementById("countdown");

const intervalId = setInterval(() => {
  countdown--;
  element.textContent = `Nog ${countdown} seconden...`;
  
  if (countdown <= 0) {
    element.textContent = "Start! 🚀";
    clearInterval(intervalId);
  }
}, 1000);
  • ⏱️ Timers stoppen wanneer het doel bereikt is
  • 🖱️ Animaties stoppen bij gebruikersinteractie
  • 🔋 Resources vrijgeven voor performance

Performance

Frames

  • Een scherm refresht meestal 60 x / seconde (60 FPS)
  • Animaties zien er smooth uit als ze synchroon lopen met die refresh rate
  • Visuele haperingen kunnen optreden door:
    • 📈 Stutter: gebeurt wanneer frames onregelmatig worden weergegeven 
    • ⏭️ Framedrops: ontstaan wanneer de computer het niet bijhoudt en frames overslaat

setTimout() & setInterval() zijn niet ideaal voor animaties

  • 🖥️ Niet synchroon met scherm
  • 🪫 CPU-belasting: Blijft lopen, zelfs als het tabblad niet zichtbaar is. Kan laptop traag maken​
  • 😵 Laggy bewegingen: Slechte performance kan leiden tot framedrops en stutter.

Oplossing

✨requestAnimationFrame()✨

Smooth animations

requestAnimationFrame()

= Vraagt de browser om een functie uit te voeren op het juiste moment voor het volgende frame

function animate() {
  // Code die iets doet
  // ...
  requestAnimationFrame(animate);
}

animate();

1️⃣

2️⃣

3️⃣

Named function

Named function

Geef de functienaam mee als parameter

requestAnimationFrame()

let x = 0;
const balloon = document.querySelector("#balloon");

function animate() {
  balloon.style.left = `${x}px`;

  x += 1; // Even snel als framerate

  requestAnimationFrame(animate);
}

animate();

Voorbeeld: elke frame een element 1px verplaatsen

Timestamp parameter

  • = huidige tijd in milliseconden sinds page load
  • Automatisch meegegeven door requestAnimationFrame()
  • Gebruik voor o.a.:
    • Berekenen van deltaTime (tijd tussen frames)
    • Snelheidsberekeningen onafhankelijk van framerate

Timestamp parameter

const box = document.getElementById("box");
let lastTime = 0;

function animate(timestamp) {
  if (!lastTime) lastTime = timestamp;
  const deltaTime = timestamp - lastTime;
  
  const leftPos = parseFloat(box.style.left) + deltaTime * 0.1
  
  box.style.left = leftPos + "px";
  lastTime = timestamp;
  
  requestAnimationFrame(animate);
}

animate();

cancelAnimationFrame()

Stopt (of pauzeert) een lopende animatie die gestart is met requestAnimationFrame()

let animationId;
let x = 0;

function animate() {
  console.log(`Positie: ${x}`);
  x += 1;
  animationId = requestAnimationFrame(animate);
}

animate();

cancelAnimationFrame(animationId);

cancelAnimationFrame()

Enhancement zodat de animatie minstens 3 seconden wordt uitgevoerd

let animationId;
let x = 0;

function animate() {
  console.log(`Positie: ${x}`);
  x += 1;
  animationId = requestAnimationFrame(animate);
}

animate();

const stopAnimation = () => cancelAnimationFrame(animationId);

setTimeout(stopAnimation, 3000); // Stopt na 3 sec

CSS vs. JS

CSS vs. JS

  • Gebruik CSS voor
    • ​eenvoudige UI-elementen
    • standaard overgangen
  • Gebruik JavaScript voor voor alles wat
    • complex is
    • interactief is
    • berekend moet worden

JS: Welke timer gebruik je wanneer?

  • setTimeout()
    • Eenmalig
    • Stopmethode: clearTimeout(id)
  • setInterval()
    • Herhalende taken met vaste timing
    • Stopmethode: clearInterval(id)
  • requestAnimationFrame()
    • Vloeiende visuele animaties
    • Stopmethode: cancelAnimationFrame(id)