让动画更优雅–缓动算法

起因

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

Tween.js

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

动画效果

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和一些常量求出位置坐标的函数(如果你在初中数学学了一点点 那么这些都是很简单的)

又到了快乐的学习时间了

Download .End

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3btu62mvs06co