摘星星之角色无限循环跳跃动画

用Cocos Creator实现了一个无限循环的跳跃动作，并在每次跳跃动作完成后播放一个声音

这是一个非常典型的使用场景，展示了如何将动作（cc.moveBy）、缓动函数（cc.easeCubicActionOut 和 cc.easeCubicActionIn）、回调函数（cc.callFunc）和动作序列（cc.sequence）组合起来实现复杂的动画效果

代码解析

//主角跳跃持续时间
   @property(cc.Integer)
   private jumpDuration:number=0;
//主角跳跃高度
   @property(cc.Integer)
   private jumpHeight:number=0;

　　private jumpAction:cc.Action=null;

private setJumpAction() {
    // 跳跃上升
    let jumpUp = cc.moveBy(this.jumpDuration, new cc.Vec2(0, this.jumpHeight)).easing(cc.easeCubicActionOut());
    // 下落
    let jumpDown = cc.moveBy(this.jumpDuration, new cc.Vec2(0, -this.jumpHeight)).easing(cc.easeCubicActionIn());
    // 添加一个回调函数，用于在动作结束时调用我们定义的其他方法
    let callback = cc.callFunc(this.playJumpSound, this);
    // 不断重复，而且每次完成落地动作后调用回调来播放声音
    return cc.repeatForever(cc.sequence(jumpUp, jumpDown, callback));
}
//调用声音引擎播放声音
playJumpSound() {
    cc.audioEngine.play(this.jumpAudio, false, 1);
}
//动作的执行：
//要让节点执行这个动作，你需要在某个地方调用 setJumpAction 方法，并将返回的动作绑定到节点上。
start() {
    this.jumpAction = this.setJumpAction();
    this.node.runAction(this.jumpAction);
}
//动作的停止：
//如果需要停止动作，可以使用 node.stopAllActions() 或 node.stopAction(action) 方法。
stopJumpAction() {
    this.node.stopAllActions();
}

代码说明

1. 跳跃上升动作（jumpUp）：
   • 使用 cc.moveBy 创建一个向上移动的动作
   • 移动距离为 (0, this.jumpHeight)，表示只在垂直方向上移动
   • 使用 cc.easeCubicActionOut 缓动函数，让跳跃动作在结束时逐渐减速，模拟自然的跳跃效果
2. 下落动作（jumpDown）：
   • 使用 cc.moveBy 创建一个向下移动的动作
   • 移动距离为 (0, -this.jumpHeight)，表示向下移动相同的距离
   • 使用 cc.easeCubicActionIn 缓动函数，让下落动作在开始时逐渐加速，模拟自然的下落效果
3. 回调函数（callback）：
   • 使用 cc.callFunc 创建一个回调函数，用于在动作序列的某个点调用自定义的方法
   • 在这里，回调函数调用了 this.playJumpSound 方法，并将 this 作为上下文传入，确保回调函数中的 this 指向当前组件实例
4. 动作序列（cc.sequence）：
   • 使用 cc.sequence 将多个动作按顺序组合成一个序列
   • 在这个例子中，序列包含：
     1. 跳跃上升动作（jumpUp）
     2. 下落动作（jumpDown）
     3. 回调函数（callback），用于播放声音
5. 无限循环（cc.repeatForever）：
   • 使用 cc.repeatForever 将动作序列设置为无限循环
   • 这样，节点会不断地执行跳跃动作，并在每次落地后播放声音

通过上述代码，你可以实现一个无限循环的跳跃动作，并在每次跳跃完成后播放声音

这种实现方式非常灵活，可以根据需要调整动作的持续时间、跳跃高度、缓动效果等