requestAnimationFrame的使用

window.requestAnimationFrame()方法就是告诉浏览器,你想在浏览器里执行一个动画或者执行浏览器通过调用一个特定函数来更新动画的请求。该方法接收一个函数名作为参数。这样我们就可以不适用定时器来产生动画效果。这个方法会比定时器更加流畅。

大多数电脑显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此,最平滑动画的最佳循环间隔是1000ms/60,约等于16.6ms。
  而setTimeout和setInterval的问题是,它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务,那动画代码就要等前面的任务完成后再执行
  requestAnimationFrame采用系统时间间隔,保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,增加开销;也不会因为间隔时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果

下面是实际应用:
HTML代码

<div class="box">
    <div class="ball"></div>
</div>

CSS代码

.box {
    width: 800px;
    height: 600px;
    border: 1px solid;
    position: relative;
}
.ball {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: red;
    position: absolute;
}

JS代码

var ball = document.querySelector(".ball");     
    var i = 0;
    function move() {           
        if (i == 750) {
            i =0;
        }else {
            i += 3;
        }
        //console.log(i)
        ball.style.cssText = "left: "+ i +"px";         
        requestAnimationFrame (move);
    }       
    move();

这样,小球就能像使用定时器一样运动起来了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,025评论 25 709
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,156评论 5 13
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,599评论 6 30
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,115评论 19 139
  • 时光飞逝,转眼又到了必须离家、奔赴远方、醉心工作的节骨眼上。此刻躺在家里温暖的被窝中,回忆起刚刚过去的2016,心...
    大头说阅读 3,574评论 10 12