注意目录和修改相同的字符编码

H5有哪些API？

一、requestAnimationFrame

平时我们实现一个动画，如每隔10ms，让盒子向右移动50px，是这样写的：

 1 <body>
 2     <div class="demo"></div>
 3     <script type="text/javascript">
 4     var dom = document.getElementsByClassName('demo')[0]
 5     animates = setInterval(()=>{
 6         dom.style.left = dom.offsetLeft + 50 + 'px'
 7             if(dom.offsetLeft == 500) {
 8             clearInterval(animates)
 9         }
10     },100)
11     </script>
12 </body>

其实这样写的效果是有点问题，不能准确的移动盒子位置，会导致失帧的问题

浏览器每秒重绘60次，即大约16ms重绘一次。

1s-----60次
大概16ms     一次
分析盒子每隔10ms的真实效果的运动位移（考虑浏览器每16ms的一次重绘）
10ms 后，left=50   页面实际位置是0
16ms 后，left=50(不变)   页面实际位置是50
20ms 后，left=100  页面实际位置是50(与上次不变)
30ms 后，left=150  页面实际位置是50(与上次不变)
32ms 后,  left=150(不变)，页面实际位置是150

 

以上分析的结果可以看出来确实是跟10ms向右移动50px的效果不一样，如何优化上面的代码呢？

可以使用H5提供的API实现：requestAnimationFrame

 1 <script type="text/javascript">
 2     var dom = document.getElementsByClassName('demo')[0]
 3     function move() {
 4         dom.style.left = dom.offsetLeft + 2 + 'px'
 5         var animates = requestAnimationFrame(move)
 6         if(dom.offsetLeft == 500) {
 7             cancelAnimationFrame(animates)
 8         }
 9     }
10     move()
11 </script>

 requestAnimationFrame的优点：在大多数浏览器中，当运行在后台标签页或隐藏的<iframe>里时，requestAnimationFrame会暂停调用，以减少CPU、内存的压力，节省电池电量。

 

posted @ 2022-04-28 15:27  黑使  阅读(451)  评论(0)    收藏  举报