js中的requestAnimationFrame
requestAnimationFrame的作用就是重绘
一个简单的demo如下
<!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>js中的requestAnimationFrame
原文地址：https://www.cnblogs.com/ye-hcj/p/10352988.html