让动画更优雅–缓动算法

发布于 2020-06-01  147 次阅读


起因

有些人是那种又菜又爱玩的,比如说我,最近想写个主题,主题动画细节也是一个非常重要的地方,但是动画算法我太懒了,想直接抄过来,jq是有算法插件的,可是这带个jq,更自由的我,选择隔壁大佬推荐的Tween.js

让动画更优雅–缓动算法插图

Tween.js

Tween.js是一个包含各种动画算法的JS库,本来想自己写个的,但是不是说,既然有轮子何必重复造,实际上是自己太懒(我以前cpp还是写过类似的算法的 )。

动画效果

让动画更优雅–缓动算法插图(1)
Linear:线性匀速运动效果;

Quadratic:二次方的缓动(t^2);

Cubic:三次方的缓动(t^3);

Quartic:四次方的缓动(t^4);

Quintic:五次方的缓动(t^5);

Sinusoidal:正弦曲线的缓动(sin(t));

Exponential:指数曲线的缓动(2^t);

Circular:圆形曲线的缓动(sqrt(1-t^2));

Elastic:指数衰减的正弦曲线缓动;

Back:超过范围的三次方缓动((s+1)t^3 – st^2);

Bounce:指数衰减的反弹缓动。

缓动方式

easeIn:从0开始加速的缓动,也就是先慢后快;
easeOut:减速到0的缓动,也就是先快后慢;
easeInOut:前半段从0开始加速,后半段减速到0的缓动。

如何使用

为了简单我讲解一下简单使用方法(二次封装后的使用)

  
   Math.animation(from, to, duration, easing, callback);

   from和to参数表示动画起始数值和结束数值
  
   duration为动画持续时间,默认300,默认单位是毫秒,建议使用数值,例如600,也支持带单位,例如600ms或者0.6s;

    easing为缓动的类型,字符串类型,源自Tween.js。例如:'Linear','Quad.easeIn','Bounce.easeInOut'等等,需要注意大小写。 其中,默认值是'Linear';

     callback为回调函数,支持2个参数(value, isEnding),其中value表示实时变化的计算值,isEnding是布尔值,表示动画是否完全停止。

比如我要使用缓动0-100 Bounce.easeInOut类型缓动

  Math.animation(0, 100, function (value) {
//value为缓动当前值
 ball.style.transform = 'translateX(' + value + 'px)';
  }, 'Bounce.easeInOut', 600);    

贴上作者的博客

优点

不依赖任何jQuery, Zepto之类的JS(天生精简 干练小巧)

代码可读性性高(代码也是很简单的,难度极低 适合学习)

补习时间

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

通常字母代表

  t: current time(当前时间)
  b: beginning value(初始值)
  c: change in value(变化量)
  d: duration(持续时间)

举个例子说我们要从位置0的地方运动到100,时间是10秒

b, c, d三个参数就已经确认了,b初始值就是0,变化值c就是100-0就是100,最终的时间就是10,此时,只要给一个小于最终时间10的值

Tween.Linear就会返回当前时间应该的坐标,例如,假设此时动画进行到第5秒,也就是t为5

这其实就是一个函数,用t和一些常量求出位置坐标的函数(如果你在初中数学学了一点点 那么这些都是很简单的)

又到了快乐的学习时间了


一个爱好捣鼓网站的男孩纸!