window.requestAnimationFrame() 方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

如果你想做逐帧动画的时候，你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常来说，被调用的频率是每秒60次，但是一般会遵循W3C标准规定的频率。如果是后台标签页面，重绘频率则会大大降低。

基本语法:

requestID = window.requestAnimationFrame(callback);  // Firefox 23 / IE10 / Chrome / Safari 7 (incl. iOS)

requestID = window.mozRequestAnimationFrame(callback);  // Firefox < 23

requestID = window.webkitRequestAnimationFrame(callback); // Older versions Chrome/Webkit　

浏览器支持情况:

下面通过两个简单的Demo介绍下window.requestAnimationFrame() 方法的使用

返回顶部
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>返回顶部</title>

  <style>

    .box {

      margin: 0 auto;

      width: 100%;

      height: 5000px;

    }

    .box1 {

      background: #b94a48;

    }

    .box2 {

      background: #fb8c00;

    }

    .box3 {

      background: #669900;

    }

    .box4 {

      background: #c0a16b;

    }

    .top {

      position: fixed;

      right: 20px;

      bottom: 20px;

      width: 40px;

      height: 40px;

      background: #8dc7ff;

      border-radius: 50%;

      cursor: pointer;

    }

  </style>

  <script>

    window.requestAnimationFrame = (function () {

      return window.requestAnimationFrame ||

        window.webkitRequestAnimationFrame ||

        window.mozRequestAnimationFrame ||

        function (callback) {

          window.setTimeout(callback, 6000 / 60)

        }

    })()

    window.cancelAnimFrame = (function () {

      return window.cancelAnimationFrame ||

        window.webkitCancelAnimationFrame ||

        window.mozCancelAnimationFrame ||

        window.oCancelAnimationFrame ||

        window.msCancelAnimationFrame ||

        function (callback) {

          window.clearTimeout(callback)

        }

    })()

    function scrollToTop() {

      let top = window.pageYOffset

      const duration = 320

      const step = top / (duration / (1000 / 60)) >> 0

      const fn = () => {

        if (top >= 0) {

          top -= step

          window.scrollTo(0, top)

          fn.rafTimer = window.requestAnimationFrame(fn)

        } else {

          window.scrollTo(0, 0)

          window.cancelAnimationFrame(fn.rafTimer)

        }

      }

      fn.rafTimer = window.requestAnimationFrame(fn)

    }

  </script>

</head>

<body>

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

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

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

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

<div class="top" onclick="scrollToTop()"></div>

</body>

</html>

锚点定位
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>锚点定位</title>

  <style>

    .top {

      margin: 100px auto;

      cursor: pointer;

    }

    .top1 {

      color: #b94a48;

    }

    .top2 {

      color: #fb8c00;

    }

    .top3 {

      color: #669900;

    }

    .top4 {

      color: #c0a16b;

    }

    .box {

      margin: 0 auto;

      width: 100%;

      height: 5000px;

    }

    .box1 {

      background: #b94a48;

    }

    .box2 {

      background: #fb8c00;

    }

    .box3 {

      background: #669900;

    }

    .box4 {

      background: #c0a16b;

    }

  </style>

  <script>

    window.requestAnimationFrame = (function () {

      return window.requestAnimationFrame ||

        window.webkitRequestAnimationFrame ||

        window.mozRequestAnimationFrame ||

        function (callback) {

          window.setTimeout(callback, 6000 / 60)

        }

    })()

    window.cancelAnimFrame = (function () {

      return window.cancelAnimationFrame ||

        window.webkitCancelAnimationFrame ||

        window.mozCancelAnimationFrame ||

        window.oCancelAnimationFrame ||

        window.msCancelAnimationFrame ||

        function (callback) {

          window.clearTimeout(callback)

        }

    })()

    function goPosition(index) {

      let top = 0

      let distance = document.getElementById(index).offsetTop

      const duration = 320

      const step = distance / (duration / (1000 / 60)) >> 0

      const fn = () => {

        if (distance >= top) {

          top += step

          window.scrollTo(0, top)

          fn.rafTimer = window.requestAnimationFrame(fn)

        } else {

          window.cancelAnimationFrame(fn.rafTimer)

        }

      }

      fn.rafTimer = window.requestAnimationFrame(fn)

    }

  </script>

</head>

<body>

<div class="top top1" onclick="goPosition('box1')">跳到第一个</div>

<div class="top top2" onclick="goPosition('box2')">跳到第二个</div>

<div class="top top3" onclick="goPosition('box3')">跳到第三个</div>

<div class="top top4" onclick="goPosition('box4')">跳到第四个</div>

<div id="box1" class="box box1"></div>

<div id="box2" class="box box2"></div>

<div id="box3" class="box box3"></div>

<div id="box4" class="box box4"></div>

</body>

</html>
网上技术大牛针对浏览器兼容封装源码:
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/

// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {

    var lastTime = 0;

    var vendors = ['ms', 'moz', 'webkit', 'o'];

    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];

        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']

                                   || window[vendors[x]+'CancelRequestAnimationFrame'];

    }

    if (!window.requestAnimationFrame)

        window.requestAnimationFrame = function(callback, element) {

            var currTime = new Date().getTime();

            var timeToCall = Math.max(0, 16 - (currTime - lastTime));

            var id = window.setTimeout(function() { callback(currTime + timeToCall); },

              timeToCall);

            lastTime = currTime + timeToCall;

            return id;

        };

    if (!window.cancelAnimationFrame)

        window.cancelAnimationFrame = function(id) {

            clearTimeout(id);

        };

}());

　　

参考资料：

window.requestAnimationFrame - Web API 接口

window.requestAnimationFrame() ,做逐帧动画，你值得拥有的更多相关文章

  1. animation中的steps()逐帧动画

    在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...

  2. 逐帧动画抖动、适配布局、SVG Sprites

    笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units + rem.具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 . 笔者目前(2017. ...

  3. CSS技巧：逐帧动画抖动解决方案

    笔者所在的前端团队主要从事移动端的H5页面开发,而团队使用的适配方案是: viewport units + rem.具体可以参见凹凸实验室的文章 – 利用视口单位实现适配布局 . 笔者目前(2017. ...

  4. Android动画效果之Frame Animation（逐帧动画）

    前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

  5. css3 实现逐帧动画

    css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...

  6. Esfog_UnityShader教程_逐帧动画

    有段日子没出这个系列的新文章了,今天就拿一个比较常见也比较基础的利用改变Shader来改变不断调整UV实现播放逐帧动画的小功能.很久没写了就当练练手了.在新版本的Unity中早就已经集成了Sprite ...

  7. css3 animation实现逐帧动画

    css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...

  8. 利用css3-animation来制作逐帧动画

    前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇.今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animati ...

  9. 转Android 用Animation-list实现逐帧动画

    Android 用Animation-list实现逐帧动画     第一步:先上图片素材,以下素材放到res/drawable目录下: http://blog.csdn.net/aminfo/arti ...

随机推荐

  1. MVC 网站部署常见问题汇总

    一:TGIShare项目是一个MVC5的网站程序,部署在了IIS上,使用的Windows验证方式,并在本机设置了计划任务定时调用某个地址执行命令.问题汇总如下: 1.Window Server 200 ...

  2. 同步读取各平台StreamingAssets文件

    //Path为StreamingAssets文件后面的路径 public AssetBundle GetstreamingAssets(string Path) { #if UNITY_EDITOR ...

  3. SpringBoot启动流程解析

    写在前面: 由于该系统是底层系统,以微服务形式对外暴露dubbo服务,所以本流程中SpringBoot不基于jetty或者tomcat等容器启动方式发布服务,而是以执行程序方式启动来发布(参考下图ke ...

  4. java虚拟机详解

    注: 此篇文章可以算是读<深入理解Java虚拟机:JVM高级特性与最佳实践>一书后的笔记总结加上我个人的心得看法. 整体总结顺序沿用了书中顺序,但多处章节用自己的话或直白或扩展的进行了重新 ...

  5. 《Java从入门到放弃》入门篇：hibernate中的多表对应关系

    hibernate中的对应关系其实就是数据库中表的对应关系, 就跟某些电影中的某些场景是一样一样滴. 比如可以是一男一女,还可以是一男多女, 更可以是多男一女,最后最后最后还可以是多男多女!!! 有些 ...

  6. python之--------封装

    一.封装: 什么是封装呢?(封装不是单纯意义的隐藏,其实它还是可以查看的) 就是把一些不想让别人看的给隐藏起来了 封装数据:目的是保护隐私 功能封装:目的是隔离复杂度 如果用了私有的,在类的外部,无法 ...

  7. adb不是内部或外部命令

    1.安卓环境没配好, 2.tools下面没有adb.exe这个程序 3.2.3以后,adb.exe这个程序在platform-tools下而不是在tools下,所有环境变量的tools改成platfo ...

  8. 【物联网云端对接-2】通过MQTT协议与阿里云物联网套件进行云端通信

     在<程序员>杂志2017.4刊上,曾写过一篇<微软百度阿里三大物联网平台探析>,上面曾介绍了阿里云物联网套件的一些内容,在写该篇文章的时候,凌霄物联网网关还无法对接到此平台( ...

  9. ES2017异步函数现已正式可用

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~​ ES2017标准已于2017年6月份正式定稿了,并广泛支持最新的特性:异步函数.如果你曾经被异步 JavaScript 的逻辑 ...

  10. windows和linux下关闭Tomcat进程

    windows和linux下解决Tomcat进程 windows下启动Tomcat报错,8080端口号被占用,报错信息如下 两种解决方法,一种是关闭了这个端口号,另外一种是修改Tomcat下的serv ...