缓动公式大全

缓动公式大全

缓动公式大全

这两个缓动公式集合,分别收集自博客园的cloudgamer司徒正美,两个很牛的人。他们整理的缓动公式又基于国外的牛人Robert Penner ,我只是在他们的基础上拿来做了一点点修改,比如修改了参数名,并减少了一层对象。目的就是尽量缩小代码体积,并减少调用层级。

缓动公式的作用是制作模拟物理运动,如加速,减速,急刹车,重力,摇摆,模拟小球的弹跳,来回弹动,等等。但这些运动的运算公式十分复杂(至少对我来讲是),不过,我们不用自己去想了,因为一些牛人已经替我们想出了很多,我们直接拿来用就可以了。

我这里有两个版本的缓动公式,一个是由Robert Penner的原版演变而来(由cloudgamer整理),一个是司徒正美根据原版改进得到的。其实两个版本的大部分效果都是一样的,不一样的是:原版需要传4个参数,而修改版只用传1个参数。

也许你会认为,只传1个参数多好啊,那你为什么还要发原版?谁还用原版?可以看看下面

原版的一个缓动公式代码:

QuadIn: function(t,b,c,d){
 return c*(t/=d)*t + b;
 }

原版的4个参数分别代表:

  • t:缓动开始时间
  • b:缓动开始位置
  • c:缓动移动的距离
  • d:缓动持续的时间

缓动开始时间t一般从0开始递增,当缓动开始时间等于持续时间时,运动结束。因为原版的创始人是研究flash的,所以有人称原版的缓动公式叫flash流派。

修改版的缓动公式如:

QuadIn: function(p){
 return Math.pow(p, 2);
 }

而修改版的缓动公式,只需要一个参数p。但这个p的值是由【当前已执行的时间】除以【总时间】得到的,相当于原版公式的t/d.所以,p是一个永远小于1的小数,也是从0开始递增。

虽然修改版的参数少,但他返回的是一个比例值,这个比例值还要乘以需要移动的距离(即原版中的c),才能得到元素的当前位置,进而设置元素坐标。也就是说,要进行运动的话,原版的参数一个也少不了(只是放的地方不同而已)。

不过,我觉得修改版的改的很妙,也许适合一些人的口味(比如不喜欢flash流派的人)

他们具体的应用方式,可以分别查看下面的文章:

原版应用实例:cloudgamer

修改版应用实例:司徒正美

提供两个缓动公式集合的下载地址,其中Tween.js是原版,包名也是Tween;Ease.js是修改版,包名也是Ease:

原版缓动公式集合

修改版缓动公式集合

之前我说过我减少了公式中的调用层级,其实是这样的:原来的调用是:Tween.Quart.EaseIn,而我改成了这样:Tween.QuartIn,Ease类似。。。明白了吧?如果觉得调用不习惯,还是用cloudgamer他们文章里面的版本吧。

缓动公式在制作图片切换效果的时候非常有用,你会发现只要更改几个字母,就能改变运动方式,变得截然不同,非常有成就感的。

———————-后记—————————

一直以来我就喜欢做动画效果,但苦于找不到那么多的缓动公式。自从找到上面两个缓动集合之后,我不满足也继续在google上搜过,甚至用英文,但貌似只有这些。虽然我发现JS库Uize里面的缓动公式有很多很多,但他的缓动公式却不是我这样一个一个明了的函数,而是用奇怪的组合函数生成的,所以我没偷下来。。。有没有高手能把Uize的缓动公式也整理出来呢?像上面提到的两位牛人一样?

1 评论

发表评论

电子邮件地址不会被公开。