CocosCreator 源码cc.BezierBy详解

/* An action that moves the target with a cubic Bezier curve by a certain distance.
 * Relative to its movement.
 * @class BezierBy
 * @extends ActionInterval
 * @param {Number} t - time in seconds
 * @param {Vec2[]} c - Array of points
 * @example
 * var bezier = [cc.v2(0, windowSize.height / 2), cc.v2(300, -windowSize.height / 2), cc.v2(300, 100)];
 * var bezierForward = new cc.BezierBy(3, bezier);
 */
/* 使用三次贝塞尔曲线将目标移动一定距离的动作。
 * 相对于它的运动。
 * @贝塞尔类By
 * @extends ActionInterval
 * @param {Number} t -时间（以秒为单位）
 * @param {Vec2[]} c -点数组
 * @例子
 * var bezier = [cc.v2(0, windowSize.height /2), cc.v2(300, -windowSize.height /2), cc.v2(300, 100)];
 * var bezierForward = new cc.BezierBy(3, 贝塞尔曲线);
 */
function bezierAt(a, b, c, d, t) {
    return (Math.pow(1 - t, 3) * a +
        3 * t * (Math.pow(1 - t, 2)) * b +
        3 * Math.pow(t, 2) * (1 - t) * c +
        Math.pow(t, 3) * d);
};
cc.BezierBy = cc.Class({
    name: 'cc.BezierBy',
    extends: cc.ActionInterval,

    ctor: function (t, c) {
        /* 贝塞尔曲线配置参数config，开始位置，动画的前一个位置 */
        this._config = [];
        this._startPosition = cc.v2(0, 0);
        this._previousPosition = cc.v2(0, 0);
        c && cc.BezierBy.prototype.initWithDuration.call(this, t, c);
    },

    /*
     * Initializes the action.
     * @param {Number} t - time in seconds
     * @param {Vec2[]} c - Array of points
     * @return {Boolean}
     */
    /*
     * 初始化操作。
     * @param {Number} t -时间（以秒为单位）
     * @param {Vec2[]} c -点数组
     * @return {布尔值}
     */
    initWithDuration: function (t, c) {
        if (cc.ActionInterval.prototype.initWithDuration.call(this, t)) {
            this._config = c;
            return true;
        }
        return false;
    },
    /* 复制action */
    clone: function () {
        var action = new cc.BezierBy();
        this._cloneDecoration(action);
        var newConfigs = [];
        for (var i = 0; i < this._config.length; i++) {
            var selConf = this._config[i];
            newConfigs.push(cc.v2(selConf.x, selConf.y));
        }
        action.initWithDuration(this._duration, newConfigs);
        return action;
    },
    /* 设置target */
    startWithTarget: function (target) {
        cc.ActionInterval.prototype.startWithTarget.call(this, target);
        var locPosX = target.x;
        var locPosY = target.y;
        this._previousPosition.x = locPosX;
        this._previousPosition.y = locPosY;
        this._startPosition.x = locPosX;
        this._startPosition.y = locPosY;
    },
    /* 时时更新 */
    update: function (dt) {
        dt = this._computeEaseTime(dt);
        if (this.target) {
            var locConfig = this._config;
            var xa = 0;
            var xb = locConfig[0].x;
            var xc = locConfig[1].x;
            var xd = locConfig[2].x;

            var ya = 0;
            var yb = locConfig[0].y;
            var yc = locConfig[1].y;
            var yd = locConfig[2].y;

            var x = bezierAt(xa, xb, xc, xd, dt);
            var y = bezierAt(ya, yb, yc, yd, dt);

            var locStartPosition = this._startPosition;
            if (cc.macro.ENABLE_STACKABLE_ACTIONS) {
                var targetX = this.target.x;
                var targetY = this.target.y;
                var locPreviousPosition = this._previousPosition;

                locStartPosition.x = locStartPosition.x + targetX - locPreviousPosition.x;
                locStartPosition.y = locStartPosition.y + targetY - locPreviousPosition.y;
                x = x + locStartPosition.x;
                y = y + locStartPosition.y;
                locPreviousPosition.x = x;
                locPreviousPosition.y = y;
                this.target.setPosition(x, y);
            } else {
                this.target.setPosition(locStartPosition.x + x, locStartPosition.y + y);
            }
        }
    },
    /* 翻转动画 */
    reverse: function () {
        var locConfig = this._config;
        var x0 = locConfig[0].x, y0 = locConfig[0].y;
        var x1 = locConfig[1].x, y1 = locConfig[1].y;
        var x2 = locConfig[2].x, y2 = locConfig[2].y;
        var r = [
            cc.v2(x1 - x2, y1 - y2),
            cc.v2(x0 - x2, y0 - y2),
            cc.v2(-x2, -y2)];
        var action = new cc.BezierBy(this._duration, r);
        this._cloneDecoration(action);
        this._reverseEaseList(action);
        return action;
    }
});

/**
 * !#en
 * An action that moves the target with a cubic Bezier curve by a certain distance.
 * Relative to its movement.
 * !#zh 按贝赛尔曲线轨迹移动指定的距离。
 * @method bezierBy
 * @param {Number} t - time in seconds
 * @param {Vec2[]} c - Array of points
 * @return {ActionInterval}
 * @example
 * // example
 * var bezier = [cc.v2(0, windowSize.height / 2), cc.v2(300, -windowSize.height / 2), cc.v2(300, 100)];
 * var bezierForward = cc.bezierBy(3, bezier);
 */
/* 创建一个新对象 */
cc.bezierBy = function (t, c) {
    return new cc.BezierBy(t, c);
};