在阅读Ant Design BackTop
代码时候看到tween算法，以前一直没有深入看看，这里稍微研究下

const easeInOutCubic = (t: number, b: number, c: number, d: number) => {  const cc = c - b;  t /= d / 2;  if (t < 1) {    return (cc / 2) * t * t * t + b;  } else {    return (cc / 2) * ((t -= 2) * t * t + 2) + b;  }};

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的缓动。

var Tween = {    Linear: function(t,b,c,d){ return c*t/d + b; },    Quad: {        easeIn: function(t,b,c,d){            return c*(t/=d)*t + b;        },        easeOut: function(t,b,c,d){            return -c *(t/=d)*(t-2) + b;        },        easeInOut: function(t,b,c,d){            if ((t/=d/2) < 1) return c/2*t*t + b;            return -c/2 * (( t)*(t-2) - 1) + b;        }    },    Cubic: {        easeIn: function(t,b,c,d){            return c*(t/=d)*t*t + b;        },        easeOut: function(t,b,c,d){            return c*((t=t/d-1)*t*t + 1) + b;        },        easeInOut: function(t,b,c,d){            if ((t/=d/2) < 1) return c/2*t*t*t + b;            return c/2*((t-=2)*t*t + 2) + b;        }    },    Quart: {        easeIn: function(t,b,c,d){            return c*(t/=d)*t*t*t + b;        },        easeOut: function(t,b,c,d){            return -c * ((t=t/d-1)*t*t*t - 1) + b;        },        easeInOut: function(t,b,c,d){            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;            return -c/2 * ((t-=2)*t*t*t - 2) + b;        }    },    Quint: {        easeIn: function(t,b,c,d){            return c*(t/=d)*t*t*t*t + b;        },        easeOut: function(t,b,c,d){            return c*((t=t/d-1)*t*t*t*t + 1) + b;        },        easeInOut: function(t,b,c,d){            if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;            return c/2*((t-=2)*t*t*t*t + 2) + b;        }    },    Sine: {        easeIn: function(t,b,c,d){            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;        },        easeOut: function(t,b,c,d){            return c * Math.sin(t/d * (Math.PI/2)) + b;        },        easeInOut: function(t,b,c,d){            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;        }    },    Expo: {        easeIn: function(t,b,c,d){            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;        },        easeOut: function(t,b,c,d){            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;        },        easeInOut: function(t,b,c,d){            if (t==0) return b;            if (t==d) return b+c;            if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;            return c/2 * (-Math.pow(2, -10 *  t) + 2) + b;        }    },    Circ: {        easeIn: function(t,b,c,d){            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;        },        easeOut: function(t,b,c,d){            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;        },        easeInOut: function(t,b,c,d){            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;        }    },    Elastic: {        easeIn: function(t,b,c,d,a,p){            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }            else var s = p/(2*Math.PI) * Math.asin (c/a);            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;        },        easeOut: function(t,b,c,d,a,p){            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }            else var s = p/(2*Math.PI) * Math.asin (c/a);            return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);        },        easeInOut: function(t,b,c,d,a,p){            if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }            else var s = p/(2*Math.PI) * Math.asin (c/a);            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;        }    },    Back: {        easeIn: function(t,b,c,d,s){            if (s == undefined) s = 1.70158;            return c*(t/=d)*t*((s+1)*t - s) + b;        },        easeOut: function(t,b,c,d,s){            if (s == undefined) s = 1.70158;            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;        },        easeInOut: function(t,b,c,d,s){            if (s == undefined) s = 1.70158;             if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;        }    },    Bounce: {        easeIn: function(t,b,c,d){            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;        },        easeOut: function(t,b,c,d){            if ((t/=d) < (1/2.75)) {                return c*(7.5625*t*t) + b;            } else if (t < (2/2.75)) {                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;            } else if (t < (2.5/2.75)) {                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;            } else {                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;            }        },        easeInOut: function(t,b,c,d){            if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;            else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;        }    }}

参考

Tween效果
http://www.cnblogs.com/cloudg...
https://github.com/zhangxinxu...
https://www.zhangxinxu.com/st...
如何使用Tween.js各类原生动画运动缓动算法