电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

HTML5优化Web动画—requestAnimationFrame

2020-10-29 18:38:02 出处:[ 菜菜电脑网 ] 人气:次阅读


在页面中解决问题动画,我们有很多同样
可以用于CSS3的transition
CSS3中的animation立体化keyframes规则
SVG中也可以常用SMIL-animation
最零碎的方法就是我们利用JavaScript的setTimeout/setInterval来借助于动画
不过现在我们又多了一种方法
requestAnimationFrame

优势

requestAnimationFrame的原理与常用方法与setTimeout/setInterval近似于
它是以运算符的形式来发挥作用动画
既然它是专门用来作Web动画的,它就一定有它自己的优势


用到setTimeout/setInterval制作动画有以下缺点

  • 无法必需ms的准确性(JavaScript单线程,似乎产生堵塞)

  • 无法优化调用动画的循环机制

  • 不能考虑到绘制动画的最佳时机(只是有用的按一定时间调用循环)

相比之下,requestAnimationFrame有以下优点

  • 动画更加顺畅,经由浏览器优化(页面连续前可执行一次)

  • 窗口未激活时,动画暂停,有效率节省CPU花销

  • 省电,对移动前端很的关系

常用

requestAnimationFrame和setTimeout/setInterval一样
都是window上的方法
所以我们可以如此一来运用于
requestAnimationFrame()
参数是一个回退函数,在函数内部我们必需变动元素样式
并且必须手动可执行Pardosa
同样送回一个句柄
风行cancelAnimationFrame可以作废它
看一个例子


现在我们要使页面中的一个元素延展

<p id="demo"></p>
#demo {    width: 0;    height: 100px;    background-color: orange;}

先来到底setInterval的付诸

var demo = document.getElementById('demo');var len = 0;var timerFunc = function(){    len += 5;    if(len <= 200){        demo.style.width = len + 'px';         }else{        clearInterval(timer);    }}var timer = setInterval(timerFunc, 20);

requestAnimationFrame借助的动画

var demo = document.getElementById('demo');var len = 0;var timerFunc = function(){    len += 5;    if(len <= 200){        demo.style.width = len + 'px';        requestAnimationFrame(timerFunc); /*分派程序在*/    }else{        cancelAnimationFrame(timer);     }}var timer = requestAnimationFrame(timerFunc);

可以挖掘出我们requestAnimationFrame呈现出的动画非常的顺畅

相容

既然是比较新的东西,难免就时会存有各浏览器的兼容性问题
不过现在的浏览器已经赞成的很好了

我们可以为它寄给个polyfill

window.requestAnimationFrame = (function(){  return  window.requestAnimationFrame       ||          window.webkitRequestAnimationFrame ||          window.mozRequestAnimationFrame    ||          function(callback){            window.setTimeout(callback, 1000 / 60);          };})();window.requestAnimationFrame = (function(){  return  window.cancelAnimationFrame       ||          window.webkitCancelAnimationFrame ||          window.mozCancelAnimationFrame    ||          function(ID){            window.clearTimeout(ID);          };})();

如果这个浏览器真的什么都并未
那么它情况下错位(fallback)用到setTimeout和clearTimeout了


上面只是一个直观的polyfill
不过大神撰写了更好的
还可以把各浏览器复数来进行统一

(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);    };}());

后来又有了更新
无关js可以挥这里
github原址

if (!Date.now)    Date.now = function() { return new Date().getTime(); };(function() {    'use strict';    var vendors = ['webkit', 'moz'];    for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {        var vp = vendors[i];        window.requestAnimationFrame = window[vp+'RequestAnimationFrame'];        window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame']                                   || window[vp+'CancelRequestAnimationFrame']);    }    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {                var lastTime = 0;        window.requestAnimationFrame = function(callback) {            var now = Date.now();                        var nextTime = Math.max(lastTime + 16, now);                        return setTimeout(function() { callback(lastTime = nextTime); },                              nextTime - now);        };        window.cancelAnimationFrame = clearTimeout;    }}());

感兴趣的同学可以研究研究

以上就是HTML5优化Web动画—requestAnimationFrame的内容,更多无关内容恳请瞩目PHP中文网(www.php.cn)!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152