欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

window.requestAnimationFrame() 实现动画效果

程序员文章站 2024-01-18 20:42:04
...

应该是有一些css3元素animation所无法做到的动画效果吧，所以有个requestAnimationFrame的存在

requestAnimationFrame用来告诉浏览器你希望执行一个动画，并在下一次浏览器重绘之前，调用指定的函数来更新动画。该方法接受一个回调，并在下一次浏览器重绘之前调用该动画

另外requestAnimationFrame会返回一个非零值，这个值用来在cancelAnimationFrame()中取消执行动画


requestAnimationFrame具体说明

<html>
	<head></head>
	<body>
		<div id='e' style='border:1px solid;width:100px;height:100px;position:relative;'></div>
		<button id='b'>取消执行动画</button><br>
		<button id='c'>执行动画</button>
		<script>
		//用来兼容不同浏览器
		//我在deepin chrome63测试，发现requestAnimationFrame和webkitRequestAnimationFrame都支持，mozRequestAnimationFrame不支持
		window.requestAnimat = (function(){
		    return window.requestAnimationFrame ||
		    window.webkitRequestAnimationFrame  ||
		    window.mozRequestAnimationFrame || function(callback){
		        setTimeout(callback,1000/60);
		    }
		})();
		let e = document.getElementById('e'),b=document.getElementById('b'),c=document.getElementById('c');
		//便宜量
		let left = 0;
		//正反向
		let flag = true;
		let ret = 0;
		//渲染方法
		function render(){
		    if(flag){
		        e.style.left = `${left++}`;
		        if(left == 100)flag = false;
		    }else{
		        e.style.left = `${left--}`;
		        if(left == 0)flag = true;
		    }
		}
		
		function loopAnim(){
		    render();
		    ret = requestAnimat(loopAnim);
		};
		//在点了多次c之后，动画速度比较快的情况下点b，则动画效果一点点减慢直到停止
		b.onclick = function(){
		    window.cancelAnimationFrame(ret);
		};
		//如果一直点c，动画会越来越快
		c.onclick = function(){
		    loopAnim();
		};
		(loopAnim())();
		</script>
	</body>
</html>

上一篇： SQLSERVER聚集索引与非聚集索引的再次研究（下）

下一篇： requestAnimationFrame() 动画效果的函数

推荐阅读