JavaScript 動(dòng)畫

• JavaScript 動(dòng)畫
  • 實(shí)現(xiàn)方式
  • JavaScript 動(dòng)畫三要素
  • 定時(shí)器
  • 常見動(dòng)畫
  • 動(dòng)畫函數(shù)

JavaScript 動(dòng)畫

幀，為動(dòng)畫的最小單位，一個(gè)靜態(tài)的圖像。幀頻，每秒播放的幀的數(shù)量。一個(gè)動(dòng)畫是由很多幀組成的，因?yàn)槿搜鄣臅毫籼匦?，?dāng)圖片交替的速度大于每秒 30 幀以上既有動(dòng)畫的感覺。

實(shí)現(xiàn)方式

• gif 圖像形式存儲(chǔ)，容量大，需第三方制圖工具制作。
• flash 需要第三方制作工具，不推薦。
• CSS3 實(shí)現(xiàn)動(dòng)畫具有局限性
• JavaScript 可實(shí)現(xiàn)大部分上面幾類可實(shí)現(xiàn)的動(dòng)畫效果

JavaScript 動(dòng)畫三要素

定時(shí)器

setInterval

• func 為執(zhí)行改變屬性的操作
• delay 為出發(fā)時(shí)間間隔（毫秒為單位）
• para1 為執(zhí)行時(shí)可傳入改變屬性函數(shù)的參數(shù)

var intervalId = setInterval(func, delay[, param1, param2, ...]);
clearInterval(intervalId);

NOTE：使用 setInterval 可以調(diào)用一次定時(shí)器既可實(shí)現(xiàn)連貫的動(dòng)畫。使用 clearInterval 即可清除動(dòng)畫效果。

setTimeout

• func 為執(zhí)行改變屬性的操作
• delay 為出發(fā)時(shí)間間隔（毫秒為單位）默認(rèn)為 0
• para1 為執(zhí)行時(shí)可傳入改變屬性函數(shù)的參數(shù)

var timeoutId = setTimeout(func[, delay, param1, param2, ...]);
clearTimeout(timeoutId);

NOTE：使用 setTimeout 實(shí)現(xiàn)動(dòng)畫，則需要在動(dòng)畫每一幀結(jié)束時(shí)再次調(diào)用定時(shí)器。但它無需清除定時(shí)器。

區(qū)別

• setTimeout 在延時(shí)后只執(zhí)行一次，setInterval 則會(huì)每隔一個(gè)延時(shí)期間后會(huì)再執(zhí)行。

requestAnimationFrame

類似于 setTimeout 但是無需設(shè)定時(shí)間間隔。此定時(shí)器為 HTML5 中的新標(biāo)準(zhǔn)，其間隔時(shí)間不由用戶控制，而是由顯示器的刷新頻率決定。（市面上的顯示器刷新頻率為每秒刷新60次）

優(yōu)勢(shì)

• 無需設(shè)置間隔時(shí)間
• 動(dòng)畫流暢度高

var requestId = requestAnimationFrame(func);
cancelAnimationFrame(requestId);

NOTE：使用它來實(shí)現(xiàn)動(dòng)畫與 setTimeout 類似，需要每次每幀結(jié)束時(shí)再次調(diào)用。不可設(shè)置時(shí)間間隔（系統(tǒng)決定），時(shí)間間隔為16.67毫秒一幀。

常見動(dòng)畫

大多的復(fù)雜動(dòng)畫都是有下列的簡(jiǎn)單動(dòng)畫所組成的。

• 形變，改變?cè)氐膶捀?/li>
• 位移，改變?cè)叵鄬?duì)位置
• 旋轉(zhuǎn)
• 透明度
• 其他...

動(dòng)畫函數(shù)

下面的例子為以 px 為單位的動(dòng)畫代碼

var animation = function(ele, attr, from, to) {
  var distance = Math.abs(to - from);
  var stepLength = distance/100;
  var sign = (to - from)/distance;
  var offset = 0;
  var step = function(){
    var tmpOffset = offset + stepLength;
    if (tmpOffset < distance) {
      ele.style[attr] = from + tmpOffset * sign + 'px';
      offset = tmpOffset;
    } else {
      ele.style[attr] = to + 'px';
      clearInterval(intervalID);
    }
  }
  ele.style[attr] = from + 'px';
  var intervalID = setInterval(step, 10);
}