【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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞