Tween算法分析（更新中）

目前实现一些h5动画效果主要Tween算法，也已经有现成的库了（比如jquery-ui、jquery-easing、TweenJS等），本文主要分析一下Tween算法，涉及的数学也比较简单。

现在我们以jquery-easing为例，对其算法做一些分析，下面了解一下该库主要的效果及实现：

可以自己在线体验一下demo

// 对应涉及的算法公式
linear：线性关系 
Sine：三角函数
Quad：二次方
Cubic：三次方
Quart：四次方
Quint：五次方
Circ：开平方根(Math.sqit)
Expo：幂函数(Math.pow)
Elastic：三角函数和开立方根
Back：常数1.70158

当是每个效果又有3种运动方式：

// 每个效果都分三个缓动方式
easeIn：从0开始加速的运动；
easeOut：减速到0的运动；
easeInOut：前半段从0开始加速，后半段减速到0的运动。

现在看下使用方式：

// t: current time, b: begInnIng value, c: change In value, d: duration
// t 已执行时间
// b 开始值
// c 目标值
// d 执行时长
function linear(t, b, c, d) {
    return t * c / d + b;
}

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

var startTime = Date.now();

function run() {
    var timeStamp = Date.now();
    var time = timeStamp - startTime;

    var position = easeInOutCubic(time, 0, 20, 250);
    console.log(position);
    if (time < 250) {
        run();
    }
}

run();

运算的结果就是当前的运动路程。

Tween算法分析（更新中）

Tween算法分析（更新中）

线性算法