Cocos Creator 的 动作（Action）系统:moveBy的使用

Cocos Creator 快速上手：制作第一个游戏

可以在这里感受一下这款游戏的完成形态：
http://fbdemos.leanapp.cn/star-catcher/

准备项目和资源

我们已经为您准备好了制作这款游戏需要的全部资源，下载 初始项目 后，解压到您希望的位置，之后我们就可以开始了：
下载初始项目：Gitee
您也可以下载最终完成的项目，跟随教程制作过程中有任何不明白的地方都可以打开完成版的项目作为参考：
下载完成项目：Gitee

Cocos Creator 的 动作（Action）系统

在 Cocos Creator 中，动作简单来说就是 节点的位移、缩放和旋转。

// Player.js
    properties: {
        //...
    },

    setJumpAction: function () {
        // 跳跃上升
        var jumpUp = cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
        // 下落
        var jumpDown = cc.moveBy(this.jumpDuration, cc.v2(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
        // 不断重复
        return cc.repeatForever(cc.sequence(jumpUp, jumpDown));
    },

例如在上面的代码中，moveBy() 方法的作用是在规定的时间内移动指定的一段距离，第一个参数就是我们之前定义主角属性中的跳跃时间，第二个参数是一个 Vec2（表示 2D 向量和坐标）类型的对象，为了更好的理解，我们可以看看官方给的函数说明：

/**
 * !#en
 * Moves a Node object x,y pixels by modifying its position property.                                  <br/>
 * x and y are relative to the position of the object.                                                 <br/>
 * Several MoveBy actions can be concurrently called, and the resulting                                <br/>
 * movement will be the sum of individual movements.
 * !#zh 移动指定的距离。
 * @method moveBy
 * @param {Number} duration duration in seconds
 * @param {Vec2|Number} deltaPos
 * @param {Number} [deltaY]
 * @return {ActionInterval}
 * @example
 * // example
 * var actionTo = cc.moveBy(2, cc.v2(windowSize.width - 40, windowSize.height - 40));
 */
cc.moveBy = function (duration, deltaPos, deltaY) {
    return new cc.MoveBy(duration, deltaPos, deltaY);
};

可以看到，方法 moveBy 一共可以传入三个参数，前两个参数我们已经知道，第三个参数是 Number 类型的 Y 坐标，我们可以发现第二个参数是可以传入两种类型的，第一种是 Number 类型，第二种才是 Vec2 类型，如果我们在这里传入的是 Number 类型，那么默认这个参数就是 X 坐标，此时就要填第三个参数，为 Y 坐标。上面的例子中 cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)) 第二个参数传入的是使用 cc.v2 方法构建的 Vec2 类型对象，这个类型表示的是一个坐标，即有 X 坐标也有 Y 坐标，因为不需要再传入第三个参数！同时注意官方的一段话 x and y are relative to the position of the object.，这句话的意思是传入的 X、Y 坐标都是相对于节点当前的坐标位置，而不是整个坐标系的绝对坐标。

了解了参数的含义之后，我们再来关注 moveBy() 方法的返回值，看官方说明可以知道，这个方法返回的是一个ActionInterval类型的对象，ActionInterval在 Cocos 中是一个表示时间间隔动作的类，这种动作在一定时间内完成。到这里我们就可以理解代码 cc.moveBy(this.jumpDuration, cc.v2(0, this.jumpHeight)).easing(cc.easeCubicActionOut()) 前一部分 的意思了，它的意思就是构造一个 ActionInterval类型的对象，这个对象表示在jumpDuration 的时间内，移动到相对于当前节点的 （0，this.jumpHeight） 的坐标位置，简单来说，就是一个向上跳跃的动作。

那么后半部分 easing(cc.easeCubicActionOut()) 的作用是什么呢？easing 是ActionInterval类下的一个方法，这个方法可以让时间间隔动作呈现为一种缓动运动，传入的参数是一个缓动对象，返回一个ActionInterval类型对象，这里传入的是使用 easeCubicActionInOut方法构建的缓动对象，EaseCubicInOut是按三次函数缓动进入并退出的动作，具体曲线可参考下图：

详细内容可参考： API

---

在 onLoad 方法里调用刚添加的 setJumpAction 方法，然后执行 runAction 来开始动作：

// Player.js
    onLoad: function () {
        // 初始化跳跃动作
        this.jumpAction = this.setJumpAction();
        this.node.runAction(this.jumpAction);
    },

onLoad 方法会在场景加载后立刻执行，所以我们会把初始化相关的操作和逻辑都放在这里面。我们首先将循环跳跃的动作传给了 jumpAction 变量，之后调用这个组件挂载的节点下的 runAction 方法，传入循环跳跃的 Action 从而让节点（主角）一直跳跃。保存脚本，然后我们就可以开始第一次运行游戏了！

点击 Cocos Creator 编辑器上方正中的 预览游戏 按钮，Cocos Creator 会自动打开您的默认浏览器并开始在里面运行游戏。