HTML5探秘:用requestAnimationFrame提升Web动漫

日期:2021-02-26 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

requestAnimationFrame是甚么?

在访问器动漫程序流程中,大家一般应用1个定时执行器来循环系统每隔几毫秒挪动总体目标物件1次,来让它动起来。现如今有1个好信息,访问器开发设计商们决策:“嗨,为何大家不在访问器里出示这样1个API呢,这样1来大家能够为客户提升她们的动漫。”因此,这个requestAnimationFrame()涵数便是对于动漫实际效果的API,你能够把它用在DOM上的设计风格转变或画布动漫或WebGL中。

应用requestAnimationFrame有甚么益处?

访问器能够提升并行处理的动漫姿势,更有效的再次排序姿势编码序列,并把可以合拼的姿势放在1个3D渲染周期限内进行,从而展现出更顺畅的动漫实际效果。例如,根据requestAnimationFrame(),JS动漫可以和CSS动漫/转换或SVG SMIL动漫同歩产生。此外,假如在1个访问器标识页里运作1个动漫,当这个标识页不能见时,访问器会中止它,这会降低CPU,运行内存的工作压力,节约电池电量。

requestAnimationFrame的用法

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


// usage:
// instead of setInterval(render, 16) ....

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();
// place the rAF *before* the render() to assure as close to
// 60fps with the setTimeout fallback.

对requestAnimationFrame更牢固的封裝

Opera访问器的技术性师Erik Möller 把这个涵数开展了封裝,使得它能更好的适配各种各样访问器。你能够读1读这篇文章内容,但基础上他的编码便是分辨应用4ms還是16ms的延迟时间,来最好配对60fps。下面便是这段编码,你可使用它,但请留意,这段编码里应用的是规范涵数,我给它再加了适配各种各样访问器模块前缀。

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    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);
        };
}());

我看来看应用requestAnimationFrame的实际效果

 requestAnimationFrame API

window.requestAnimationFrame(function(/* time */ time){
  // time ~= +new Date // the unix time
});

 回调函数涵数里的主要参数能够传入時间。

各种各样访问器对requestAnimationFrame的适用状况
谷歌访问器,火狐访问器,IE10+都完成了这个涵数,即便你的访问器很古老,上面的对requestAnimationFrame封裝也能让这个方式在IE8/9上不错误。

上一篇:html5 拖拽提交照片案例演试 返回下一篇:没有了