IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    脚本处理动画的良好方法-requestAnimationFrame

    *开心果*发表于 2013-12-18 02:33:48
    love 0

    alloyteam发了一篇blog文章《追踪子弹-初中简单的物理和数学》,在文章的最后提到一个动画的计时控制的东东- requestAnimationFrame,它是一个浏览器在通过计时制作动画时,解决显示刷新频率和渲染效率之间的平衡问题。

    文章中,有列举出相应的好处,大致能理解其中的意义,但缺少相应API的介绍,于是GOOLE了下,找到微软TechNet中一篇文章《基于脚本的动画的计时控制》。

    Internet Explorer 10 和使用 JavaScript 的 Windows 应用商店应用引入了对 requestAnimationFrame 方法的支持,该方法通过在系统准备好绘制动画帧时调用该帧,从而为创建动画网页提供了一种更平滑更高效的方法。在此 API 之前,使用setTimeout 和 setInterval 绘制的动画并没有为 Web 开发人员提供有效的方法来规划动画的图形计时器。这导致了动画过度绘制,浪费 CPU 周期以及消耗额外的电能等问题。而且,即使看不到网站,特别是当网站使用背景选项卡中的页面或浏览器已最小化时,动画都会频繁出现。

    以上是引用该文的内容,可以知道requestAnimationFrame 是一个新的API,支持的浏览器也应该是IE10+,alloyteam文章里针对浏览器的兼容,写了一个函数,大家可以参考下。如下

    window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
    window.setTimeout(callback, 1000/60);
    };
    })();

     

    以上是相关的关联信息,大家有兴趣可以自己探索下。

    示例:

    http://wmcuit.com/examples/RequestAnimationFrame/

    http://wmcuit.com/examples/RequestAnimationFrame/t3.html

    参考:

    追踪子弹-初中简单的物理和数学

    基于脚本的动画的计时控制



沪ICP备19023445号-2号
友情链接