jquery 處理單位換算

// elem: dom
    // prop: cssKey
    // valueParts(單位與數值)
    function adjustCSS(elem, prop, valueParts, tween) {
        debugger;

        var adjusted;
        var scale = 1;
        var maxIterations = 20;

        //----------------------------
        // 獲取現在的值
        var currentValue = tween ?
                function () {
                    return tween.cur();
                } :
                function () {
                    return jQuery.css(elem, prop, "");
                };
        var initial = currentValue();
        //----------------------------
        // 設定的單位
        let unit;

        if (valueParts && valueParts[3]) {
            unit = valueParts[3];
        } else {
            unit = (jQuery.cssNumber[prop] ? "" : "px");
        }
        //----------------------------
        // 預設單位
        // Starting value computation is required for potential unit mismatches
        var initialInUnit = (jQuery.cssNumber[prop] || unit !== "px" && +initial);

        if (initialInUnit) {
            initialInUnit = rcssNum.exec(jQuery.css(elem, prop));
        }

        //----------------------------
        // 若預設單位與設定單位不同
        // 必須進入轉換
        if (initialInUnit && initialInUnit[3] !== unit) {

            // Trust units reported by jQuery.css
            unit = unit || initialInUnit[3];

            // Make sure we update the tween properties later on
            valueParts = valueParts || [];

            // Iteratively approximate from a nonzero starting point
            initialInUnit = +initial || 1;

            do {

                // If previous iteration zeroed out, double until we get *something*.
                // Use string for doubling so we don't accidentally see scale as unchanged below
                scale = scale || ".5";

                // Adjust and apply
                initialInUnit = initialInUnit / scale;
                jQuery.style(elem, prop, initialInUnit + unit);

                // Update scale, tolerating zero or NaN from tween.cur()
                // Break the loop if scale is unchanged or perfect, or if we've just had enough.
            } while (
                    (function () {
                        debugger;
                        let c_value = currentValue();
                        let a = scale;

                        // initial(一開始的值)
                        // 用目標單位移動後，取比例值，供下次修正
                        let b = scale = (c_value / initial);

                        return (a !== b) && (scale !== 1) && --maxIterations;
                    })()
                    );
        }
        //----------------------------
        if (valueParts) {
            initialInUnit = +initialInUnit || +initial || 0;

            // Apply relative offset (+=/-=) if specified
            adjusted = valueParts[1] ?
                    initialInUnit + (valueParts[1] + 1) * valueParts[2] :
                    +valueParts[2];
            if (tween) {
                tween.unit = unit;
                tween.start = initialInUnit;
                tween.end = adjusted;
            }
        }
        return adjusted;
    }--------------------------------------------------------------------

js easing-fun

http://gsgd.co.uk/sandbox/jquery/easing/

https://github.com/gdsmith/jquery.easing/blob/master/jquery.easing.js

// 緩動函式
    // 擴增 jquery.easing 的功能
    $.easing['jswing'] = $.easing['swing'];


// x: percent (0 ~ 1)
    // t: current time (經過時間 ms)
    // b: begInnIng value (0)
    // c: change In value (1)
    // d: duration (總時間 ms)
    $.extend($.easing, {
        def: 'easeOutQuad',
        ease: function(x, t, b, c, d) {
            return $.easing[$.easing.def](x, t, b, c, d);
        },
        linear: function(x) {
            return x;
        },
        swing: function(x, t, b, c, d) {
            //alert(jQuery.easing.default);
            return $.easing[$.easing.def](x, t, b, c, d);
        },
        easeInQuad: function(x, t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOutQuad: function(x, t, b, c, d) {
            var result = -c * (t /= d) * (t - 2) + b;
            return result;
        },
        easeInOutQuad: function(x, t, b, c, d) {
            if ((t /= d / 2) < 1)
                return c / 2 * t * t + b;
            return -c / 2 * ((--t) * (t - 2) - 1) + b;
        },
        easeInCubic: function(x, t, b, c, d) {
            return c * (t /= d) * t * t + b;
        },
        easeOutCubic: function(x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t + 1) + b;
        },
        easeInOutCubic: function(x, 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;
        },
        easeInQuart: function(x, t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },
        easeOutQuart: function(x, t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
        },
        easeInOutQuart: function(x, 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;
        },
        easeInQuint: function(x, t, b, c, d) {
            return c * (t /= d) * t * t * t * t + b;
        },
        easeOutQuint: function(x, t, b, c, d) {
            return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
        },
        easeInOutQuint: function(x, 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;
        },
        easeInSine: function(x, t, b, c, d) {
            // console.dir(arguments);
            var result = -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
            return result;
        },
        easeOutSine: function(x, t, b, c, d) {
            return c * Math.sin(t / d * (Math.PI / 2)) + b;
        },
        easeInOutSine: function(x, t, b, c, d) {
            return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
        },
        easeInExpo: function(x, t, b, c, d) {
            return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
        },
        easeOutExpo: function(x, t, b, c, d) {
            return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
        },
        easeInOutExpo: function(x, 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;
        },
        easeInCirc: function(x, t, b, c, d) {
            return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
        },
        easeOutCirc: function(x, t, b, c, d) {
            return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
        },
        easeInOutCirc: function(x, 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;
        },
        easeInElastic: function(x, t, b, c, d) {
            var s = 1.70158;
            var p = 0;
            var a = c;
            if (t == 0)
                return b;
            if ((t /= d) == 1)
                return b + c;
            if (!p)
                p = d * .3;
            if (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;
        },
        easeOutElastic: function(x, t, b, c, d) {
            var s = 1.70158;
            var p = 0;
            var a = c;
            if (t == 0)
                return b;
            if ((t /= d) == 1)
                return b + c;
            if (!p)
                p = d * .3;
            if (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;
        },
        easeInOutElastic: function(x, t, b, c, d) {
            var s = 1.70158;
            var p = 0;
            var a = c;
            if (t == 0)
                return b;
            if ((t /= d / 2) == 2)
                return b + c;
            if (!p)
                p = d * (.3 * 1.5);
            if (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;
        },
        easeInBack: function(x, t, b, c, d, s) {
            if (s == undefined)
                s = 1.70158;
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        easeOutBack: function(x, t, b, c, d, s) {
            if (s == undefined)
                s = 1.70158;
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        easeInOutBack: function(x, 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;
        },
        easeInBounce: function(x, t, b, c, d) {
            return c - $.easing.easeOutBounce(x, d - t, 0, c, d) + b;
        },
        easeOutBounce: function(x, 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;
            }
        },
        easeInOutBounce: function(x, t, b, c, d) {
            if (t < d / 2)
                return $.easing.easeInBounce(x, t * 2, 0, c, d) * .5 + b;
            return $.easing.easeOutBounce(x, t * 2 - d, 0, c, d) * .5 + c * .5 + b;
        }
    });

用4點產生 cubicBezier 的座標

/**
 * 給予所有的控制點(只負責一維)
 *
 * @param {*} points: 控制曲線的點數
 * @param {*} t: 0-1
 */
function cubicBezier(points, t) {

    var tmpPoints;

    while (points.length > 1) {

        tmpPoints = [];
        for (var i = 0; typeof points[i + 1] !== 'undefined'; i++) {

            var value = (points[i + 1] - points[i]) * t + points[i];
            tmpPoints.push(value);
        }
        points = tmpPoints.slice();
    }

    return points[0];
}


// 形成座標軸
function genCoordinate(data, sample) {
    var sample = sample || 10;

    var coordinate = [];

    var x = [];
    var y = [];

    data.forEach(function (v, i) {
        x.push(v.x);
        y.push(v.y);
    });

    var loop = true;
    var _sample = (1 / sample);
    for (var i = 0; loop; i += _sample) {

        if (i >= 1) {
            i = 1;
            loop = false;
        }
        var _x = cubicBezier(x, i);
        var _y = cubicBezier(y, i);

        coordinate.push({x: _x, y: _y});
    }

    return coordinate;
}

// 4個控制點
var points = [{x: 0, y: 0}, {x: 1, y: 0}, {x: 1, y: 0}, {x: 1, y: 1}];

// 產生座標
var res = genCoordinate(points);

console.dir(res);

// 必須用內差法從座標軸取值

cubicBezier 的 function 轉換

https://github.com/matthewlein/Ceaser/blob/master/developer/ceaser-easings.js

var ceaser = {

// defaults

'linear' : 'linear',

'ease' : 'ease',

'easeIn' : 'ease-in',

'easeOut' : 'ease-out',

'easeInOut' : 'ease-in-out',

// Penner equations

'easeInCubic' : 'cubic-bezier(.55,.055,.675,.19)',

'easeOutCubic' : 'cubic-bezier(.215,.61,.355,1)',

'easeInOutCubic' : 'cubic-bezier(.645,.045,.355,1)',

'easeInCirc' : 'cubic-bezier(.6,.04,.98,.335)',

'easeOutCirc' : 'cubic-bezier(.075,.82,.165,1)',

'easeInOutCirc' : 'cubic-bezier(.785,.135,.15,.86)',

'easeInExpo' : 'cubic-bezier(.95,.05,.795,.035)',

'easeOutExpo' : 'cubic-bezier(.19,1,.22,1)',

'easeInOutExpo' : 'cubic-bezier(1,0,0,1)',

'easeInQuad' : 'cubic-bezier(.55,.085,.68,.53)',

'easeOutQuad' : 'cubic-bezier(.25,.46,.45,.94)',

'easeInOutQuad' : 'cubic-bezier(.455,.03,.515,.955)',

'easeInQuart' : 'cubic-bezier(.895,.03,.685,.22)',

'easeOutQuart' : 'cubic-bezier(.165,.84,.44,1)',

'easeInOutQuart' : 'cubic-bezier(.77,0,.175,1)',

'easeInQuint' : 'cubic-bezier(.755,.05,.855,.06)',

'easeOutQuint' : 'cubic-bezier(.23,1,.32,1)',

'easeInOutQuint' : 'cubic-bezier(.86,0,.07,1)',

'easeInSine' : 'cubic-bezier(.47,0,.745,.715)',

'easeOutSine' : 'cubic-bezier(.39,.575,.565,1)',

'easeInOutSine' : 'cubic-bezier(.445,.05,.55,.95)',

'easeInBack' : 'cubic-bezier(.6,-.28,.735,.045)',

'easeOutBack' : 'cubic-bezier(.175, .885,.32,1.275)',

'easeInOutBack' : 'cubic-bezier(.68,-.55,.265,1.55)'

};