一.动画函数

动画，是位移关于时间的函数：s = f(t)

自变量是t，因变量是s，物体的位移随着时间变化，看起来就是动画，例如：

// 已知
var property = 'marginLeft';
var s0 = 100;   // 起点
var s1 = 200;   // 终点
var duration = 1000;

// 由题意得
var S = s1 - s0;    // 总位移
var T = duration;   // 总时间

// 求任意时刻t对应的位移
var t0 = +new Date();
var tick, interval = 1000 / 60;
setTimeout(tick = function() {
    var t = +new Date() - t0;
    // 完成度
    var p = Math.min(t / T, 1);
    // t时刻相对起点的位移s
    var s = S * p;
    document.body.style[property] = s0 + s + 'px';

    if (p !== 1) setTimeout(tick, interval);
}, interval);

marginLeft从100px到200px均匀改变，body先向右跳100px，然后在1秒内匀速向右移动100px

要实现这样的动画，面临的唯一问题是：已知总位移S和总时间T，求任意时刻t相对起点的位移s

我们实现了匀速直线运动，看起来好像没有用到s = vt，其实是有的：

s = v * t
  = (S / T) * t
  = S * (t / T)
  = S * p

因为动画函数是s = f(t)，里面没有v，需要把v换成已知量，因为完成度p = t / T，所以动画也是位移关于完成度的函数

二.匀变速运动

同样的道理，换掉匀变速运动位移公式中的v和a，得到位移s关于时间t的函数

匀加速

位移公式：

// v0 = 0时，只有一个未知量a
s = 1/2at^2

已知总时间T、总位移S、完成度p = t / T，求任意时刻t相对起点的位移s：

// 终点处有
S = 1/2 * a * T^2
// 得
a = 2S / T^2
// 任意时刻
s = 1/2 * a * t^2
  = 1/2 * (2S / T^2) * t^2
  = 1/2 * 2S * (t^2 / T^2)
  = S * p^2

匀减速

位移公式：

// 含有2个未知量v0和a
s = v0t - 1/2at^2

已知总时间T、总位移S、完成度p = t / T，求任意时刻t相对起点的位移s：

// 1.逆向匀加速求v0
// 起点处有
S = 1/2 * a * T^2
// 得
a = 2S / T^2
v0 = aT = 2S / T^2 * T = 2S / T
// 2.任意时刻
s = v0 * t - 1/2 * a * t^2
  = (2S / T) * t - 1/2 * (2S / T^2) * t^2
  = 2S * (t / T) - S * (t^2 / T^2)
  = 2S * p - S * p^2
  = S * p * (2 - p)

三.曲线运动

简单的曲线运动可以分解成直线运动，例如正弦函数y = sinx可以分解为：

// x轴匀速直线
x = S * p = 2PI * p
// y轴sinx
y = sinx = sin(2PI * p)

平抛运动可以分解为：

// x轴匀速直线
x = S * p = X * p
// y轴匀加速
y = S * p^2 = Y * p^2

抛物线的左半边可以看作向左平抛的逆向运动：

// x轴匀速直线
x = S * p = X * p
// y轴匀减速
y = S * p * (2 - p) = Y * p * (2 - p)

圆周运动稍微特殊一点，代数方程(x - a)^2 + (y - b)^2 = r^2，计算x, y存在取正负号的问题（比较麻烦，但可行），所以考虑用参数方程：

// 对于圆上任意一点，有
sinθ = y / r, cosθ = x / r
// 得参数方程
x = a + r * cosθ, y = b + r * sinθ

// 圆心为(0, 0)时
x = r * cosθ = r * cos(θ * p), y = r * sinθ = r * sin(θ * p)

角度[0, 2PI]均匀变化，x, y随角度变化

P.S.圆周运动用极坐标解释起来有些牵强（r(θ) = r，设置圆心，再[0, 360]均匀rotate，没有transform的时代要怎么计算位置？）

四.easing函数

对比上面得出的公式：

s = S * p               // 匀速
s = S * p^2             // 匀加速
s = S * p * (2 - p)     // 匀减速
s = S * cos(2PI * p)    // cos
s = S * sin(2PI * p)    // sin

发现总位移S不变，后面的部分不同，所以：

var easings = {
    linear: function(p) { return p; },
    acceleration: function(p) { return p * p; },
    deceleration: function(p) { return p * (2 - p); },
    sin: function(p) { return Math.sin(2 * Math.PI * p); },
    cos: function(p) { return Math.cos(2 * Math.PI * p); }
}

这些easing函数用来修正p，所以动画应该是：

// 任意时刻t对应的位移
st = s0 + S * easing(p)
// 即
// 当前值 = 初始值 + totalDelta * easing函数修正后的完成度

因为p = t / T，所以实际上easing作用于t，也叫时间控制函数（timingFunction）

动画库都是这样干的，例如jQuery：

// from https://github.com/jquery/jquery/blob/2d4f53416e5f74fa98e0c1d66b6f3c285a12f0ce/src/effects/Tween.js
jQuery.easing = {
    linear: function( p ) {
        return p;
    },
    swing: function( p ) {
        return 0.5 - Math.cos( p * Math.PI ) / 2;
    },
    _default: "swing"
};

velocity：

// from https://github.com/ayqy/velocity-1.4.1/blob/master/velocity.js
Velocity.Easings = {
    linear: function(p) {
    // 线性，直接返回完成度
        return p;
    },
    swing: function(p) {
    // 两头慢中间快，cos从+1到-1变化，中间斜率最大变化最快
        return 0.5 - Math.cos(p * Math.PI) / 2;
    },
    /* Bonus "spring" easing, which is a less exaggerated version of easeInOutElastic. */
    spring: function(p) {
    // easeInOutElastic的温和版
        return 1 - (Math.cos(p * 4.5 * Math.PI) * Math.exp(-p * 6));
    }
};

其它复杂的easing，比如摩擦力（spring）、重力（bounce）等物理效果，常见的时间控制easing系列（各种Bezier曲线对应的缓动函数），step效果也是同样的原理，修正完成度，也就是所谓的速度控制

五.在线Demo

通过velocity自定义easing和Redirects来实现这些曲线轨迹，例如：

// 自定义缓动函数
// 匀加速
Velocity.Easings.acceleration = function (p, opts, tweenDelta) {
    return p * p;
};
// 匀减速
Velocity.Easings.deceleration = function (p, opts, tweenDelta) {
    return p * (2 - p);
};

// 自定义动画效果
Velocity.Redirects['throw-h'] = function(element, options, elementsIndex, elementsSize, elements, promiseData) {
    Velocity(this, {
        translateX: [300, 'linear', 0],
        translateY: [300, 'acceleration', 0]
    }, options);
};

// run
Velocity(document.body, 'throw-h', 3000);

详细见Demo：http://ayqy.net/temp/curve-path-animation.html

Demo过程中发现velocity在完成度为1时，会强制赋值一遍终点，这在sin之类的场景下有问题，源码如下：

else if (percentComplete === 1) {
// 已完成，手动赋值，确保终点准确（不受计算精度影响）
//!!! 不应该手动赋值终点了，因为sin之类的，终点是0
//!!! 强制赋值就错了
    /* If this is the last tick pass (if we've reached 100% completion for this tween),
     ensure that currentValue is explicitly set to its target endValue so that it's not subjected to any rounding. */
    // currentValue = tween.endValue;
    currentValue = tween.currentValue;
}

修复方法是信任easing函数（直接去掉上面这部分内容），终点处也通过easing计算得到当前值，这样做的缺点是存在计算精度的问题，比如sin在2PI为0，计算结果是一个极小值，而不是0，但没什么实际影响

参考资料

• 关于动画，你需要知道的：最后一遍看月影前辈的这篇文章