欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript requestAnimationFrame動畫詳解

 更新時間:2017年09月14日 10:09:36   作者:Lockeyi  
這篇文章主要為大家詳細(xì)介紹了JavaScript requestAnimationFrame動畫,具有一定的參考價值,感興趣的小伙伴們可以參考一下

進(jìn)入web2.0時代,在網(wǎng)頁中實(shí)現(xiàn)動畫已經(jīng)不再局限于一種方法

  • 你可以用CSS3的animattion+keyframes;
  • 你也可以用css3的transition;
  • 你還可以用通過在canvas上作圖來實(shí)現(xiàn)動畫,也可以借助jQuery動畫相關(guān)的API方便地實(shí)現(xiàn);
  • 當(dāng)然最原始的你還可以使用window.setTimout()或者window.setInterval()通過不斷更新元素的狀態(tài)位置等來實(shí)現(xiàn)動畫,前提是畫面的更新頻率要達(dá)到每秒60次才能讓肉眼看到流暢的動畫效果。

認(rèn)識JavaScript requestAnimationFrame

首先我們來看一下它的源碼
requestAnimationFrame on github

// Adapted from https://gist.github.com/paulirish/1579671 which derived from 
// 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, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon

// MIT license

if (!Date.now)
 Date.now = function() { return new Date().getTime(); };

(function() {
 'use strict';

 var vendors = ['ms', 'moz', 'webkit', 'o'];
 //瀏覽器兼容
 for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
 //對于支持的瀏覽器直接統(tǒng)一接口
  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) {
  //對于不支持的瀏覽器退而使用setTimeout和clearTimeout
  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;
 }
}());

相信那一點(diǎn)點(diǎn)源碼的閱讀對大家都沒有問題,就算讀不懂也沒關(guān)系,會調(diào)用api就可以了

requestAnimationFrame的優(yōu)點(diǎn)

瀏覽器可以優(yōu)化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內(nèi)完成,從而呈現(xiàn)出更流暢的動畫效果。比如,通過requestAnimationFrame(),JS動畫能夠和CSS動畫/變換或SVG SMIL動畫同步發(fā)生。另外,如果在一個瀏覽器標(biāo)簽頁里運(yùn)行一個動畫,當(dāng)這個標(biāo)簽頁不可見時,瀏覽器會暫停它,這會減少CPU,內(nèi)存的壓力,節(jié)省電池電量。

用法示例:

function animate() {
  console.log("animation");
  window.requestAnimationFrame(animate);
 }
animate();

這里寫圖片描述

requestAnimationFrame(animate)是關(guān)鍵,它為要執(zhí)行的函數(shù)設(shè)置了動畫,所以瀏覽器控制臺會一直執(zhí)行animate()函數(shù)。

瀏覽器兼容性

這里寫圖片描述

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用Ajax生成的Excel文件并下載的實(shí)例

    使用Ajax生成的Excel文件并下載的實(shí)例

    本篇文章主要介紹了使用Ajax生成的Excel文件并下載的實(shí)例,具有一定的參考價值,有需要的可以了解一下。
    2016-11-11
  • 淺談layui里的上傳控件問題

    淺談layui里的上傳控件問題

    今天小編就為大家分享一篇淺談layui里的上傳控件問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)習(xí)筆記

    JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)

    這篇文章主要介紹了JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)習(xí)筆記,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • js阻止冒泡及jquery阻止事件冒泡示例介紹

    js阻止冒泡及jquery阻止事件冒泡示例介紹

    JQuery 提供了兩種方式來阻止事件冒泡,Jquery阻止默認(rèn)動作即通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動作,下文有個不錯的示例,需要的朋友可以參考下
    2013-11-11
  • 使用clipboard.js庫實(shí)現(xiàn)復(fù)制剪切功能

    使用clipboard.js庫實(shí)現(xiàn)復(fù)制剪切功能

    這篇文章介紹了clipboard.js實(shí)現(xiàn)復(fù)制功能的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • js this 綁定機(jī)制深入詳解

    js this 綁定機(jī)制深入詳解

    這篇文章主要介紹了js this 綁定機(jī)制,結(jié)合實(shí)例形式深入分析了js this 綁定機(jī)制相關(guān)原理、使用技巧與操作注意事項,需要的朋友可以參考下
    2020-04-04
  • select下拉框插件jquery.editable-select詳解

    select下拉框插件jquery.editable-select詳解

    本篇文章主要介紹了select下拉框插件jquery.editable-select。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子

    js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子

    這篇文章介紹了js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子,有需要的朋友可以參考一下
    2013-10-10
  • js實(shí)現(xiàn)計算器功能

    js實(shí)現(xiàn)計算器功能

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)計算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • JS匿名函數(shù)內(nèi)部this指向問題詳析

    JS匿名函數(shù)內(nèi)部this指向問題詳析

    這篇文章主要給大家介紹了關(guān)于JS匿名函數(shù)內(nèi)部this指向的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05

最新評論