Hoe maak je animaties in JavaScript?

Het maken van animaties in JavaScript kan op verschillende manieren, hier zijn er enkele:

1. SetInterval-methode: Dit is de meest basic manier om animaties te maken in JavaScript. Het idee is om een functie te maken die de staat van je animatie verandert en setInterval te gebruiken om deze functie elke x milliseconden aan te roepen.

```
let i = 0;
let animatie = setInterval(function() { // verander hier de staat van je animatie i++; console.log(i);

// stop de animatie na 100 frames if (i > 100) { clearInterval(animatie); } }, 100); // roep deze functie elke 100 milliseconden aan ```

1. requestAnimationFrame: Dit is een meer moderne en vloeiende manier om animaties te maken. Het idee is nog steeds hetzelfde (maak een functie die de staat van je animatie verandert), maar nu gebruiken we requestAnimationFrame om ervoor te zorgen dat onze animatiefunctie precies wordt aangeroepen voordat de browser opnieuw schildert. Hierdoor zijn onze animaties zo vloeiend mogelijk.

```
let i = 0;
function animatie() { // verander hier de staat van je animatie i++; console.log(i);

// stop de animatie na 100 frames if (i < 100) { requestAnimationFrame(animatie); } } animatie(); // begin de animatie ```

1. CSS-transities: Een andere manier om animaties in JavaScript te maken is door CSS-transities te manipuleren. Het voordeel hiervan is dat CSS-transities over het algemeen efficiënter zijn dan JavaScript-animaties en soepeler kunnen worden uitgevoerd.

```
let element = document.getElementById(“animate”);
element.style.transition = “all 2s”; // verander alle CSS over 2 seconden
element.style.width = “100px”; // verander de breedte naar 100px
```
Opgemerkt moet worden dat voor complexere animaties bibliotheken zoals GreenSock (GSAP) of Anime.js nuttig kunnen zijn. Ze bieden meer functies dan de ingebouwde JavaScript-methoden, zoals het eenvoudig sequentieel afspelen van animaties.