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. CSS样式----浮动（图文详解）

    标准文档流 宏观地讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个"流",必须从上而下,像"织毛衣".而设计软件,想往哪里 ...

  2. Xamarin.Forms(一) Visual Studio 连接安卓模拟器（逍遥安卓）

    刚开始学习Xamarin.Forms的时候总是比较困难的,连接安卓模拟器就花了我好长时间,后来在网上找到了方法: 1.打开adb.exe所在目录: 如:cd F:\Android\android-sd ...

  3. 用python语言编写网络爬虫

    本文主要用到python3自带的urllib模块编写轻量级的简单爬虫.至于怎么定位一个网页中具体元素的url可自行百度火狐浏览器的firebug插件或者谷歌浏览器的自带方法. 1.访问一个网址 re= ...

  4. LinkQueue（链队列）

    关于Node.h,请参考LinkStack #include"Node.h" template<typename ElemType> class LinkQueue { ...

  5. Java微信公众平台开发之公众号支付（微信内H5调起支付）

    官方文档点击查看准备工作:已通过微信认证的公众号,必须通过ICP备案域名(否则会报支付失败)借鉴了很多大神的文章,在此先谢过了 整个支付流程,看懂就很好写了 一.设置支付目录 在微信公众平台设置您的公 ...

  6. 基于注解的Spring MVC的简单入门——简略版

    网上关于此教程各种版本,太多太多了,因为我之前没搭过框架,最近带着两个实习生,为了帮他们搭框架,我只好...惭愧啊...基本原理的话各位自己了解下,表示我自己从来没研究过Spring的源码,所以工作了 ...

  7. java自旋锁

    一 Test-and-Set Lock 所谓测试设置是最基本的锁,每个线程共用一把锁,进入临界区之前看没有有线程在临界区,如果没有,则进入,并上锁,如果有则等待.java实践中利用了原子的设置stat ...

  8. Java编程入门（词汇表）

    抽象类(abstract class):抽象类不能创建对象,主要用来创建子类.Java中的抽象类使用 abstract 修饰符定义. 抽象数据类型(abstract data type ADT):抽象 ...

  9. VS2010暂停编译界面

    注:文章主要知识点来源于https://www.felix021.com/blog/read.php?981 本人主要是按照自己的理解略微整理,感谢原博主Felix201的分享! 正文如下 刚上手VS ...

  10. 初学python类

    边看python官方2.7的文档,一边动手测试了一些例子加深自己的印象. 官方文档的网址:http://python.usyiyi.cn/python_278/tutorial/classes.htm ...