JS实现连续动画效果(requestAnimFrame)
时间：2023-03-30 14:37:23
CSS
JS和CSS实现连续动画效果浏览论坛的时候看到一个问题，js是如何实现连续动画效果的？首先想到的是计时器。后来看到有同学提到requestAnimationFrame。对方法有了一些了解，于是查了一下，顺便记录一下动画的使用。Animation(CSS)CompatibilityandProperties点击此处查看兼容性animation-name：动画名称animation-duration：动画时长animation-timing-function：动画执行方式animation-delay：动画延迟执行时间animation-iteration-count：动画执行timesanimation-direction:是否反向执行动画animation-fill-mode:动画执行前后样式示例jsfiddlepreview.box{width:200px;高度：200px；背景色：浅绿色；位置：绝对；左：0；顶部：0；动画：测试3s线性2s无限；}@keyframes测试{从{}到{width:50px;高度：50px；背景色：红色；不透明度：0.5；左：500px；顶部：500px；}}
requestAnimationFrame(JS)兼容性及基本概念点此查看兼容性优势：浏览器可以优化并行动画动作，更合理地重新排列动作顺序，将动作放在一起可以合并成一个渲染周期来完成，从而呈现出更流畅的动画效果。一旦页面不在浏览器的当前选项卡中，刷新将自动停止。这节省了CPU、GPU和电源使用：继续调用requestAnimFrame以使用cancelAnimationFrame清除动画示例jsfiddlepreview#anim{position:absolute;左：0px；宽度：150px；高度：150px；行高：150px；背景：浅绿色；白颜色;边界半径：10px；padding:1em;
点此开始动画 //兼顾性处理window.requestAnimFrame=(function(){return(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(callback,element){window.setTimeout(callback,1000/60)})})()varelem=document.getElementById('anim')varstartTime=复制代码undefinedfunctionrender(time){time=Date.now()if(startTime===undefined){startTime=time}elem.style.left=((time-startTime)/10)%300+'px'elem.style复制代码.top=((time-startTime)/10)%300+'px'elem.style.borderRadius=((time-startTime)/10)%300+'px'elem.style.opacity=Math.floor((时间-开始时间/100))%2===0?1:0.3}elem.onclick=function(){(functionanimloop(){render()requestAnimFrame(animloop,elem)})()}参考MDNrequestanimationframe附录。原文发表在github上。您也可以点击这里浏览我的其他文章。欢迎star关注，谢谢！！！
