詳細(xì)內(nèi)容請(qǐng)點(diǎn)擊

在以往，我們?cè)诰W(wǎng)頁(yè)上制作動(dòng)畫效果的時(shí)候，如果是用javascript實(shí)現(xiàn)，一般都是通過(guò)定時(shí)器和間隔來(lái)實(shí)現(xiàn)的，出現(xiàn)HTML5之后，我們還可以用CSS3 的transitions和animations很方便的實(shí)現(xiàn)動(dòng)畫，這些技術(shù)手段在對(duì)于簡(jiǎn)單的或者對(duì)流暢性要求不高的動(dòng)畫不會(huì)有什么問(wèn)題，然而隨著用戶體驗(yàn)的提高，我們制作的動(dòng)畫效果有了更高的要求，那么對(duì)于比較復(fù)雜的而且具有較高流暢性的動(dòng)畫效果，用以上的兩種方法就有點(diǎn)捉襟見(jiàn)肘了。對(duì)于質(zhì)量較高的動(dòng)畫效果的實(shí)現(xiàn)，我們又不想用falsh，那怎么辦呢？為解決這個(gè)問(wèn)題，瀏覽器提供了一個(gè)統(tǒng)一幀管理、提供監(jiān)聽(tīng)?zhēng)腁PI，即requestAnimationFrame。我們今天就是利用requestAnimationFrame()函數(shù)來(lái)實(shí)現(xiàn)一個(gè)高質(zhì)量旋轉(zhuǎn)風(fēng)車的動(dòng)畫效果。

使用優(yōu)勢(shì)

一：假如同時(shí)進(jìn)行的n個(gè)動(dòng)畫，函數(shù)會(huì)把原本需要n次reflow和repaint優(yōu)化成1次，然后交給瀏覽器進(jìn)行優(yōu)化，這樣就實(shí)現(xiàn)了高質(zhì)量的動(dòng)畫效果。

二：如果瀏覽器的某個(gè)tab正在運(yùn)行這樣一個(gè)動(dòng)畫，然后你切到另一個(gè)tab，或者干脆最小化，總之就是你看不見(jiàn)它了，這時(shí)瀏覽器就會(huì)停止動(dòng)畫。這將意味著更少的CPU和更少的內(nèi)存消耗。

使用方法

調(diào)用requestAnimationFrame函數(shù)，傳遞一個(gè)callback參數(shù)，則在下一個(gè)動(dòng)畫幀時(shí)，會(huì)調(diào)用callback。

//瀏覽器兼容處理 var requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); //如何使用 (function(){ render(); requestAnimationFrame(arguments.callee, element); })();

requestAnimationFrame函數(shù)是webkit私有api，不過(guò)基本除了opera，現(xiàn)在各個(gè)最新的瀏覽器也都開(kāi)始支持了，這是個(gè)很讓人振奮的消息。另外在這里注意說(shuō)明一下，requestAnimationFrame函數(shù)只是一個(gè)做動(dòng)畫的基礎(chǔ)API，即不基于DOM元素的style變化，也不基于canvas，或者WebGL。所以，具體的動(dòng)畫細(xì)節(jié)需要我們自己寫。更多的詳細(xì)說(shuō)明介紹請(qǐng)看：requestAnimationFrame for smart animating

好了，我們了解了requestAnimationFrame函數(shù)，那么我們接下來(lái)就學(xué)以致用，制作一個(gè)高質(zhì)量旋轉(zhuǎn)風(fēng)車動(dòng)畫效果：

引入jQuery庫(kù)：

javascript代碼：

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

};

} ());

// 自定義動(dòng)畫動(dòng)作

var pinWheelArr36 = [ - 32, -302, -572, -841, -1112, -1381, -1651, -1921, -2191, -2461, -2732, -3002, -3272, -3542, -3812, -4082, -4352, -4621, -4891, -5161, -5431, -5702, -5972, -6242, -6512, -6782, -7053, -7322, -7592, -7861, -8132, -8402, -8672, -8941, -9211, -9482];

var pinWheel = $('#fengche')

var pinCount = 0;

var fps = 31;

function spin() {

setTimeout(function() {

requestAnimationFrame(spin)

if (pinCount > pinWheelArr36.length - 1) { pinCount = 0; };

pinWheel.css('background-position', pinWheelArr36[pinCount] + 'px top') pinCount++;

}, 1000 / fps);

}; spin();

HTML代碼：

更多html5內(nèi)容請(qǐng)點(diǎn)擊

轉(zhuǎn)載請(qǐng)保留本文網(wǎng)址：

http://www.shaoqun.com/a/115172.html

總結(jié)

以上是生活随笔為你收集整理的html5 制作风车,[网页设计]html5 requestAnimationFrame制作动画：旋转风车的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。