requestAnimationFrame语法糖处理动画---真香
废话不多说,直接上图上代码!!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>requestAnimationFrame</title>
<style type="text/css">
#animate{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="root">
<div id="animate"></div>
</div>
<script type="text/javascript">
// window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
// 该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行
// 语法:window.requestAnimationFrame(callback);
// HTML5标准规定了setTimeout()的第二个参数的最小值(最短间隔),不得低于4毫秒,如果低于这个值,就会自动增加。在此之前,老版本的浏览器都将最短间隔设为10毫秒。
// 另外,对于那些DOM的变动(尤其是涉及页面重新渲染的部分),通常不会立即执行,而是每16毫秒执行一次;
let el = document.getElementById('animate'),
flag= true,
left = 0,
requestAnimationFrameId = null
function loop() {
if(flag === true){
if(left >= 200){
flag = false
}
el.style.left = ` ${left ++}px`
}else{
if(left <= 0){
flag = true
}
el.style.left = ` ${left --}px`
}
}
//requestAnimationFrame效果
(function animloop() {
loop();
requestAnimationFrameId = requestAnimationFrame(animloop);
//如果left等于150 停止动画
// if(left === 150){
// cancelAnimationFrame(requestAnimationFrameId)
// }
})();
//setInterval效果
// setInterval(function(){
// loop()
// },1000/60)
</script>
</body>
</html>
以上demo代码直接跑,即可演示requestAnimationFrame;
转载注明出处,谢谢合作!!!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 不到万不得已,千万不要去外包
· C# WebAPI 插件热插拔(持续更新中)
· 会议真的有必要吗?我们产品开发9年了,但从来没开过会
· 【译】我们最喜欢的2024年的 Visual Studio 新功能
· 如何打造一个高并发系统?