詳細內容請點擊

在以往，我們在網頁上制作動畫效果的時候，如果是用javascript實現，一般都是通過定時器和間隔來實現的，出現HTML5之后，我們還可以用CSS3 的transitions和animations很方便的實現動畫，這些技術手段在對于簡單的或者對流暢性要求不高的動畫不會有什么問題，然而隨著用戶體驗的提高，我們制作的動畫效果有了更高的要求，那么對于比較復雜的而且具有較高流暢性的動畫效果，用以上的兩種方法就有點捉襟見肘了。對于質量較高的動畫效果的實現，我們又不想用falsh，那怎么辦呢？為解決這個問題，瀏覽器提供了一個統一幀管理、提供監聽幀的API，即requestAnimationFrame。我們今天就是利用requestAnimationFrame()函數來實現一個高質量旋轉風車的動畫效果。

使用優勢

一：假如同時進行的n個動畫，函數會把原本需要n次reflow和repaint優化成1次，然后交給瀏覽器進行優化，這樣就實現了高質量的動畫效果。

二：如果瀏覽器的某個tab正在運行這樣一個動畫，然后你切到另一個tab，或者干脆最小化，總之就是你看不見它了，這時瀏覽器就會停止動畫。這將意味著更少的CPU和更少的內存消耗。

使用方法

調用requestAnimationFrame函數，傳遞一個callback參數，則在下一個動畫幀時，會調用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函數是webkit私有api，不過基本除了opera，現在各個最新的瀏覽器也都開始支持了，這是個很讓人振奮的消息。另外在這里注意說明一下，requestAnimationFrame函數只是一個做動畫的基礎API，即不基于DOM元素的style變化，也不基于canvas，或者WebGL。所以，具體的動畫細節需要我們自己寫。更多的詳細說明介紹請看：requestAnimationFrame for smart animating

好了，我們了解了requestAnimationFrame函數，那么我們接下來就學以致用，制作一個高質量旋轉風車動畫效果：

引入jQuery庫：

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

};

} ());

// 自定義動畫動作

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內容請點擊

轉載請保留本文網址：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。