requestAnimationFrame 使用小记

Posted 2021-03-24 jwxs

前端的实现动画效果的方法比较多：

1.javascript 中可以通过定时器 setTimeout 来实现

2.css3 可以使用 transition 和 animation 来实现

3.html5 中的 canvas 也可以实现。

除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。

动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡

刷新频率为60Hz的屏幕每16.7ms刷新一次，我们在屏幕每次刷新前，将图像的位置向左移动一个像素，即1px。这样一来，屏幕每次刷出来的图像位置都比前一个要差1px，因此你会看到图像在移动；由于我们人眼的视觉停留效应，当前位置的图像停留在大脑的印象还没消失，紧接着图像又被移到了下一个位置，因此你才会看到图像在流畅的移动，这就是视觉效果上形成的动画。

 

setTimeout 其实就是通过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果的。但我们会发现，利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因：

• setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。

• 刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。

与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。

以下是我使用的一个图片显示循环轮播例子：

html代码

1  <ul class="lsiten-image-content" v-if="(this.newsData[0].list || []).length > 0" :style="ulBox">
2     <li class="jw-image-item" v-for="(item, index) in (newsData[0].list || [])" v-bind:key="index" @mouseover="itemOver" @mouseleave="itemLeave" :style="leftArr.length&&leftArr[index]">
3        <a @click="contentClick(item.id)" :title="item.title">
4           <img :src="ipChange(item.thumbnail.url)" :alt="item.title">
5           <span v-html="parseTitle(item.title)"></span>
6         </a>
7      </li>
8  </ul>

 

获取数据

 1 initData () {
 2   this.newsData.map((item, index) => {
 3   this.$store.dispatch(‘home_get_news‘, {
 4     menuId: item.id,
 5     pageNo: 1,
 6     pageSize: 100
 7   }).then(data => {
 8     this.leftArr = 0
 9     this.newsData[index].list = data.body.datas
10     this.ulBox.width = (this.newsData[0].list.length * 260) + ‘px‘
11     let leftArr = []
12     for(let i in this.newsData[index].list){
13       leftArr.push({left: (i * 260) + ‘px‘})
14       this.theLast = {left: (i * 260) + ‘px‘}
15     }
16     this.leftArr = leftArr
17    })
18  })
19 },

 

 使用requestAnimationFrame

 1 initAnimation () {
 2   let width = parseInt(this.ulBox.width);
 3   if (this.leftArr.length && width >= 1180) {
 4     for(let i in this.leftArr){
 5       let item = this.leftArr[i]
 6       let left = parseInt(item.left);
 7       left -= 1
 8       left === -260 && (left = parseInt(this.theLast.left));
 9       this.leftArr[i].left = left + ‘px‘
10     }
11     this.timer = requestAnimationFrame(this.initAnimation)
12   }
13 }

 

 事先存好每一张图片和最后一张图片的left值

leftArr.push({left: (i * 260) + ‘px‘})

this.theLast = {left: (i * 260) + ‘px‘}

重点：算当最左边的图片的left值等于它自身的width（我这边是260）时，当前这张图片的left就等于最后一张缓存好的图片的left值。

当然，这样处理有个bug:图片占用不完显示框的时候，循环起来会很难看（最后一张图片已经出现了但第一张图片还没消失，后面会空白一下，巨难看）。所以我这边是判断图片不够的时候不循环

 if (this.leftArr.length && width >= 1180)
并且我这边图片肯定会超过显示位置的，所以不需要担心这种情况。

这个情况的解决方法也有点思路:判断最左边图片刚刚开始触边的时候在数组末尾加上一张最左边的图片，并且把left设为最后一张的值，当最左边图片消失的时候删掉最左边那个图片
我没试这个情况。但是数组变动有可能会引发其他问题，所以暂不考虑优化

 

1 itemOver () {
2   cancelAnimationFrame(this.timer)
3 },
4 itemLeave () {
5   cancelAnimationFrame(this.timer)
6   this.initAnimation()
7 },

暂停可使用cancelAnimationFrame