mozilla
您的搜索结果

    window.requestAnimationFrame

    概述

    window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求。这个方法接受一个函数为参,该函数会在重绘前调用。

    注意: 如果想得到连贯的逐帧动画,函数中必须重新调用 requestAnimationFrame()。

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

    回调函数只会被传入一个DOMHighResTimeStamp参数,这个参数指示当前被 requestAnimationFrame 序列化的函数队列被触发的时间。因为很多个函数在这一帧被执行,所以每个函数都将被传入一个相同的时间戳,尽管经过了之前很多的计算工作。这个数值是一个小数,单位毫秒,精确度在 10 µs。

    语法

    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
    

    参数

    callback
    在每次需要重新绘制动画时,会调用这个参数所指定的函数。这个回调函数会收到一个参数,这个 DOMHighResTimeStamp 类型的参数指示当前时间距离开始触发 requestAnimationFrame 的回调的时间。

    返回值

    requestID 是一个长整型非零值,作为一个唯一的标识符.你可以将该值作为参数传给 window.cancelAnimationFrame() 来取消这个回调函数。

    例子

    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    
    var start = null;
    var d = document.getElementById('SomeElementYouWantToAnimate');
    function step(timestamp) { 
      if (start === null) start = timestamp;
      var progress = timestamp - start;
      d.style.left = Math.min(progress/10, 200) + "px";
      if (progress < 2000) {
        requestAnimationFrame(step);
      }
    }
    requestAnimationFrame(step);
    

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support

    10 webkit 

    24.0

    4.0 moz [1]
    23 [2]

    10.0

    (Yes) -o
    15.0

    Nightly build webkit

    requestID return value 23.0 webkit
    24.0
    11.0 (11.0) moz 10.0 (Yes) -o
    15.0
    ?
    Feature Android BlackBerry Browser Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? 10.0 webkit

    16.0 webkit 

    ? ? ? ?
    requestID return value ?   ? 11.0 (11.0) moz ? ? ?

    Gecko备注

    在Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8)之前,调用mozRequestAnimationFrame()方法时可以不传入任何参数.目前,该方法的callback参数是必须的.

    规范

    Timing control for script-based animations: requestAnimationFrameWD

    相关链接

    文档标签和贡献者

    此页面的贡献者有: ziyunfei, MiyagiRyota, warmhug, teoli
    最后编辑者: teoli,
    隐藏侧边栏