JavaScript 動畫

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

JavaScript 動畫

幀，為動畫的最小單位，一個靜態(tài)的圖像。幀頻，每秒播放的幀的數(shù)量。一個動畫是由很多幀組成的，因為人眼的暫留特性，當(dāng)圖片交替的速度大于每秒 30 幀以上既有動畫的感覺。

實現(xiàn)方式

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

JavaScript 動畫三要素

http://wiki.jikexueyuan.com/project/fend_note/images/J/javascript-animation.jpg" alt="" />

定時器

setInterval

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

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

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

setTimeout

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

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

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

區(qū)別

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

requestAnimationFrame

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

優(yōu)勢

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

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

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

常見動畫

大多的復(fù)雜動畫都是有下列的簡單動畫所組成的。

• 形變，改變元素的寬高
• 位移，改變元素相對位置
• 旋轉(zhuǎn)
• 透明度
• 其他...

動畫函數(shù)

下面的例子為以 px 為單位的動畫代碼

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