Javascript動畫的實現(xiàn)原理淺析
來源:易賢網(wǎng) 閱讀:663 次 日期:2015-03-06 11:42:59
溫馨提示:易賢網(wǎng)小編為您整理了“Javascript動畫的實現(xiàn)原理淺析”,方便廣大網(wǎng)友查閱!

這篇文章主要介紹了Javascript動畫的實現(xiàn)原理淺析,本文用兩個實例來解釋Javascript動畫的實現(xiàn)原理,需要的朋友可以參考下

假設(shè)有這樣一個動畫功能需求:把一個div的寬度從100px變化到200px。寫出來的代碼可能是這樣的:

代碼如下:

<div id="test1" style="width: 100px; height: 100px; background: blue; color: white;"></div>

function animate1(element, endValue, duration) {

var startTime = new Date(),

startValue = parseInt(element.style.width),

step = 1;

var timerId = setInterval(function() {

var nextValue = parseInt(element.style.width) + step;

element.style.width = nextValue + 'px';

if (nextValue >= endValue) {

clearInterval(timerId);

// 顯示動畫耗時

element.innerHTML = new Date - startTime;

}

}, duration / (endValue - startValue) * step);

}

animate1(document.getElementById('test1'), 200, 1000);

原理是每隔一定時間增加1px,一直到200px為止。然而,動畫結(jié)束后顯示的耗時卻不止1s(一般是1.5s左右)。究其原因,是因為setInterval并不能嚴(yán)格保證執(zhí)行間隔。

有沒有更好的做法呢?下面先來看一道小學(xué)數(shù)學(xué)題:

代碼如下:

A樓和B樓相距100米,一個人勻速從A樓走到B樓,走了5分鐘到達(dá)目的地,問第3分鐘時他距離A樓多遠(yuǎn)?

勻速運(yùn)動中計算某個時刻路程的計算公式為:路程 * 當(dāng)前時間 / 時間 。所以答案應(yīng)為 100 * 3 / 5 = 60 。

這道題帶來的啟發(fā)是,某個時刻的路程是可以通過特定公式計算出來的。同理,動畫過程中某個時刻的值也可以通過公式計算出來,而不是累加得出:

代碼如下:

<div id="test2" style="width: 100px; height: 100px; background: red; color: white;"></div>

function animate2(element, endValue, duration) {

var startTime = new Date(),

startValue = parseInt(element.style.width);

var timerId = setInterval(function() {

var percentage = (new Date - startTime) / duration;

var stepValue = startValue + (endValue - startValue) * percentage;

element.style.width = stepValue + 'px';

if (percentage >= 1) {

clearInterval(timerId);

element.innerHTML = new Date - startTime;

}

}, 13);

}

animate2(document.getElementById('test2'), 200, 1000);

這樣改良之后,可以看到動畫執(zhí)行耗時最多只會有10幾ms的誤差。但是問題還沒完全解決,在瀏覽器開發(fā)工具中檢查test2元素可以發(fā)現(xiàn),test2的最終寬度可能不止200px。仔細(xì)檢查animate2函數(shù)的代碼可以發(fā)現(xiàn):

1.percentage的值可能大于1,可以通過Math.min限制最大值解決。

2.即使保證了percentage的值不大于1,只要endValue或startValue為小數(shù),(endValue - startValue) * percentage的值也可能產(chǎn)生誤差,因為Javascript小數(shù)運(yùn)算的精度不夠。其實我們要保證的只是最終值的準(zhǔn)確性,所以在percentage為1的時候,直接使用endValue即可。

于是,animate2函數(shù)的代碼修改為:

代碼如下:

function animate2(element, endValue, duration) {

var startTime = new Date(),

startValue = parseInt(element.style.width);

var timerId = setInterval(function() {

// 保證百分率不大于1

var percentage = Math.min(1, (new Date - startTime) / duration);

var stepValue;

if (percentage >= 1) {

// 保證最終值的準(zhǔn)確性

stepValue = endValue;

} else {

stepValue = startValue + (endValue - startValue) * percentage;

}

element.style.width = stepValue + 'px';

if (percentage >= 1) {

clearInterval(timerId);

element.innerHTML = new Date - startTime;

}

}, 13);

}

還有最后一個疑問:setInterval的間隔為何設(shè)為13ms?原因是當(dāng)下顯示器的刷新率一般不超過75Hz(即每秒刷新75次,也就是每隔約13ms刷新一次),把間隔跟刷新率同步效果更好。

更多信息請查看IT技術(shù)專欄

更多信息請查看腳本欄目
易賢網(wǎng)手機(jī)網(wǎng)站地址:Javascript動畫的實現(xiàn)原理淺析
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機(jī)號
  • 驗證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機(jī)站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)