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

而后美化一下就是我刚才给的例子。