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

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

你可能感兴趣的文章

10 条评论
boxiZen · 2014年01月10日

谢谢分享!好人一世平安~

回复

Humphry · 2014年01月10日

XSS了呀……

回复

Fakefish 作者 · 2014年01月10日

我写的。。。

回复

Humphry · 2014年01月10日

我照着https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet上面实验了好多,都没有发现XSS。原来不需要藏在标签中吗!

回复

Fakefish 作者 · 2014年01月10日

那些高端的都已经修复了。。目前是比较脑残的错误TAT....

回复

Humphry · 2014年01月16日

各类缓动的函数可以fork这个:https://github.com/zhangxinxu/Tween/blob/master/tween.js

回复

binaryTree · 2014年01月19日

比较喜欢介风格的文章

回复

Fakefish 作者 · 2014年01月19日

喜欢我就直说啊 用得着拐弯抹角么

回复

binaryTree · 2014年01月19日

药吃一吃 吃一吃啊

回复

Fakefish 作者 · 2014年01月19日

没钱吃药。。。

回复

载入中...
Fakefish Fakefish

4.1k 声望

发布于专栏

Fakefish

我说的都是错的,除非你证明我是对的。

48 人关注