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

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

    原文作者:Fakefish
    原文地址: https://segmentfault.com/a/1190000000382263
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞