Run requestAnimationFrame elke 5 seconde
Ik loop vast met het volgende in JavaScript
Wat ik probeer is om een requestAnimationFrame elke 5 seconden te laten lopen.
Als voorbeeld heb ik een fade in gemaakt met requestAnimationFrame.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
setTimeout(() => {
let start;
let ani = window.requestAnimationFrame(animation);
function animation(timeStamp){
document.getElementById('box').style.opacity = 0;
if(!start){
start = timeStamp;
}
const opacity = (timeStamp - start) / 3000;
if(opacity >= 1){
document.getElementById('box').style.opacity = 1;
window.cancelAnimationFrame(ani);
return;
}
document.getElementById('box').style.opacity = opacity;
window.requestAnimationFrame(animation);
}
}, 5000);
let start;
let ani = window.requestAnimationFrame(animation);
function animation(timeStamp){
document.getElementById('box').style.opacity = 0;
if(!start){
start = timeStamp;
}
const opacity = (timeStamp - start) / 3000;
if(opacity >= 1){
document.getElementById('box').style.opacity = 1;
window.cancelAnimationFrame(ani);
return;
}
document.getElementById('box').style.opacity = opacity;
window.requestAnimationFrame(animation);
}
}, 5000);
Helaas doet de code het maar 1x en word de loop zoals ik die zou willen van 5 seconden niet gedaan.
Wat zie ik over het hoofd?
Je moet deze lap code dus in een functie steken dan de functie aanroepen na 5" maar ook in de functie steken "doe dat nog ne keer binnen 5"
