Javascript動畫(一)
阿新 • • 發佈:2018-12-24
Javascript定時執行程式碼塊方式
number:setInterval(func, msec)
此方法是每隔一定的時間(msec引數值)呼叫一次傳給它的函式(func引數),若不主動呼叫clearInterval(number)取消定時器,則會一直執行下去。
function animate(){
// 需執行的程式碼
}
// 每秒60幀速率執行
let timerId = setInterval(animate, 1000 / 60);
// 取消定時器
clearInterval(timerId)
number:setTimeout(func, msec)
此方法是在一定時間(msec引數)後,呼叫一次傳給它的函式(func引數),若需重複執行,則需在重複呼叫setTimeout
function animate(){
let start = +new Date(), end;
// 需執行的程式碼
end = +new Date()
// 重複執行
setTimeout(animate, 1000 / 60 - (end - start)); // 做次時間上的補償,使之更接近1秒60幀的速率
}
animate()
提示: setInterval與setTimeout中的msec引數可不填寫或填寫不為正數的值,意思是使瀏覽器以它所允許的最小時間間隔來呼叫func函式。
HTML5 出的number:requestAnimationFrame(func)
setInterval與setTimeout都是開發者告訴瀏覽器,在某個大致的時間點上執行程式碼。若是在繪製動畫,我們其實並不清楚繪製下一幀的最佳時機,相反,瀏覽器肯定比我們更瞭解繪製下一幀動畫的最佳時機。
requestAnimationFrame
瀏覽器會在最佳時機呼叫func函式,若需一直執行下去,則需在func內再次呼叫requestAnimationFrame(func)
,瀏覽器會給func傳遞一個從程式啟動(頁面載入)到呼叫func函式時的時間間隔(chrome瀏覽器)
let handleId = 0;
let lasttime = undefined;
// 瀏覽器會給函式傳遞一個從程式啟動(頁面載入)到呼叫animate函式時的時間間隔
function animate(time){
if (lasttime === undefined) { // 拋棄第一幀
lasttime = time;
} else {
let dt = time - lasttime; // 此幀距上一幀的時間間隔
lasttime = time;
// 需執行的程式碼
}
// 重複執行
handleId = requestAnimationFram(animate); // 做次時間上的補償,使之更接近1秒60幀的速率
}
// 使瀏覽在最佳時機執行第一幀動畫
handleId = requestAnimationFram(animate);
// ==== 取消 ====
cancelAnimationFrame(handleId);
提示: Chrome 瀏覽器呼叫動畫回撥函式的最大速率不超過每秒60次。
requestAnimationFrame的polyfill
(function (win) {
'use strict';
var startTime = +new Date(); //程式啟動時的時間點
win.requestAnimationFrame = (function () {
return win.requestAnimationFrame ||
win.webkitRequestAnimationFrame ||
win.mozRequestAnimationFrame ||
win.msRequestAnimationFrame ||
function (callback) {
var self = this,
start, finish;
return win.setTimeout(function () {
start = +new Date();
callback(start - startTime); //將程式執行的總時長返回給回撥函式
finish = +new Date();
self.timeout = 1000 / 60 - (finish - start);
}, self.timeout);
}
})();
win.cancelAnimationFrame = (function () {
return win.cancelAnimationFrame ||
win.webkitCancelAnimationFrame ||
win.mozCancelAnimationFrame ||
win.msCancelAnimationFrame ||
function (id) {
win.clearTimeout(id);
}
})();
})(window)