requestAnimationFrame 用法

最新推荐文章于 2024-05-23 18:15:18 发布

夜跑者

最新推荐文章于 2024-05-23 18:15:18 发布

阅读量434

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/liubangbo/article/details/103549943

版权

HTML5 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔，而且比setTimeout 和setInterval都要精确，它采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。

大多数电脑显示器的刷新频率是60Hz，大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制，不超过显示器的重绘频率，因为即使超过那个频率用户体验也不会有提升。因此，最平滑动画的最佳循环间隔是1000ms/60，约等于16.6ms

setTimeout 和setInterval 都是把动画代码放入到线程执行队列中，到时间并不一定执行。

requestAnimationFrame 是HTML5的新特性。用法如下：

<!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>
  </head>
  <body>
   
	
    <div id="div" style="width:100px; height:100px; background-color:red; position: absolute;left:0; top:0;">
    </div>
    
    <script>
    var divEle = document.getElementById("div");

	var distance = 1080;
	var timeCount = 20000;
	var animationId = 0;

	function handler( time ) {
		if(time > timeCount) {
			window.cancelAnimationFrame(animationId);
		}
		divEle.style.left = time * distance / timeCount + "px";  
		animationId = window.requestAnimationFrame( handler );
		
	}
	animationId = window.requestAnimationFrame( handler );
	  
    </script>
  </body>
</html>

从用法我们看出和setTimeout用法基本一致，只是不用设置定时时间。

我们改变timeCount就能调节动画运行的快慢。

夜跑者

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
requestAnimationFrame 用法

与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔，而且比setTimeout 和setInterval都要精确，它采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。大...
复制链接

扫一扫

专栏目录