requestAnimationFrame的作用就是重绘
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box{ background-color: rebeccapurple; width: 100px; height: 100px; } </style></head><body> <div id="box"></div> <script> var duration = 4000.0; var startTime = -1.0; function render(currentTime) { var h1 = document.getElementById("box"); var opacity = currentTime/duration; h1.style.opacity = opacity; } function eachFrame() { var timeElapse = (new Date()).getTime()-startTime; if(startTime < 0) { startTime = (new Date()).getTime(); render(0.0); }else if(timeElapse < duration) { render(timeElapse); }else { return; } window.requestAnimationFrame(eachFrame); } window.requestAnimationFrame(eachFrame); </script></body></html>
