【Canvas動畫系列】之聊聊緩動

熟悉jq動畫的童鞋確定知道easing這個插件（不知道的拖出去喂包子
看過源碼的都知道插件裏面其實都是一堆算法函數。

曾經有我的面試我問我某一個動畫是怎麼實現的。我擦，我怎麼知道。

前幾天心血來潮，看了一下easing的源碼，想了半天怎麼扒出來（大牛請出門右拐），裏面4個參數不明因此，阿西吧。不過仍是慢慢研究出來了。

戳戳戳

其實我要講的就一個函數,緩動算法怎麼來的？我tm也想知道！

// t: current time, b: begInnIng value, c: change In value, d: duration
// 1樓：樓上這什麼意思
// 2樓：我也想知道
// 樓主：我tm怎麼造，老外寫的！
// 咳咳，說白了，t就是相似幀數，每一次執行的時候+1，b是起始值，在例子中的表現爲
// 動畫的起始高度，c就是變化的數值，表現出來就是垂直高度，d是週期，表現出來是水平寬度
// 樓下是一個閹割版函數
function ani(){
  y = easings(t++,b,c,d);
  x = step;
  ctx.fillRect(x,y,3,3);
  step++;
  setTimeout(ani,0);
}

而後美化一下就是我剛纔給的例子。