HTML5优化Web动画——requestAnimationFrame

叁歲伎倆 2024-04-18 10:11 87阅读 0赞

在页面中实现动画，我们有很多选择  
可以使用CSS3的transition  
CSS3中的animation配合keyframes规则  
SVG中也可以使用SMIL-animation  
最原始的方法就是我们利用JavaScript的setTimeout/setInterval来实现动画  
不过现在我们又多了一种方法  
**requestAnimationFrame**

## 优势 ##

requestAnimationFrame的原理与使用方法与setTimeout/setInterval类似  
它是以递归的形式来实现动画  
既然它是专门用来作Web动画的，它就一定有它自己的优势

**使用setTimeout/setInterval制作动画有以下缺点**  
不能保证ms的准确性（JavaScript单线程，可能造成阻塞）  
没有优化调用动画的循环机制  
没有考虑到绘制动画的最佳时机（只是简单的按一定时间调用循环）  
**相比之下，requestAnimationFrame有以下优点**  
动画更加流畅，经由浏览器优化（页面刷新前执行一次）  
窗口未激活时，动画暂停，有效节省CPU开销  
省电，对移动端很友好

## 使用 ##

requestAnimationFrame和setTimeout/setInterval一样  
都是window上的方法  
所以我们可以直接使用  
**requestAnimationFrame()**  
参数是一个回调函数，在函数内部我们需要改变元素样式  
并且需要手动执行回调  
同样返回一个句柄  
传入**cancelAnimationFrame**可以取消它  
看一个例子

现在我们要使页面中的一个元素变宽

#demo {
        width: 0;
        height: 100px;
        background-color: orange;
    }

先来看看setInterval的实现

requestAnimationFrame实现的动画

![在这里插入图片描述][20190905094157116.gif]  
可以发现我们requestAnimationFrame展现的动画非常的流畅

也可以进入官网学习 [官网][Link 1]

[20190905094157116.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3fe6d49495f7486999fc5b6d0bb86b39.gif
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame