播放动画-cocos游戏开发入门

当前位置:　首页>> 技术小册>> cocos游戏开发入门

在制作好动画之后，我们可以驱动 PlayerController 来播放动画，播放动画的代码很简单：
```
animation.play('oneStep');
```
animation 是 Body 动画的动画组件的 ‘引用’。
play 指的是播放动画的方法，他的参数是我们之前创建好的 oneStep 这个动画剪辑，在 Cocos Creator 中，如果要播放对应的动画，必须将该动画配置在 Animation 组件的 Clips 属性内
在 PlayerController 中将如下的代码：
```
@property(Animation)
BodyAnim:Animation = null;
```
添加的位置如下：
```
@ccclass("PlayerController")
export class PlayerController extends Component {

@property(Animation)
    BodyAnim:Animation = null;
    ...
}
```
这里我们给 BodyAnim 添加了一个名为 @property 的属性，这样的语法被称为 装饰器，这里的 @property 可以帮助编辑器，使其将 BodyAnim 在编辑器内视为 Animation 类型。

如果这里代码没有编译通过，请查看是否有 const { ccclass, property } = _decorator; 代码，这里的语句将会正确的将 property 方法导出，完整的导出如下：
```
import { _decorator, Component, Vec3, EventMouse, input, Input, Animation } from "cc";
const { ccclass, property } = _decorator;
```
注意：TypeScript 的内置库和 Cocos Creator 都有名为 Animation 的类，请确保上述代码中 import { ... } from "cc" 包含 Animation。

在 jumpByStep 方法内，添加如下的代码：
```
if (this.BodyAnim) {
    if (step === 1) {
        this.BodyAnim.play('oneStep');
    } else if (step === 2) {
        this.BodyAnim.play('twoStep');
    }
}
```
此时的 jumpByStep 看起来是这样的：
```
jumpByStep(step: number) {
    if (this._startJump) {
        return;
    }
    this._startJump = true;
    this._jumpStep = step;
    this._curJumpTime = 0;
    this._curJumpSpeed = this._jumpStep * BLOCK_SIZE/ this._jumpTime;
    this.node.getPosition(this._curPos);
    Vec3.add(this._targetPos, this._curPos, new Vec3(this._jumpStep* BLOCK_SIZE, 0, 0));

if (this.BodyAnim) {
        if (step === 1) {
            this.BodyAnim.play('oneStep');
        } else if (step === 2) {
            this.BodyAnim.play('twoStep');
        }
    }
}
```
回到编辑器，此时可以通过拖拽的方式添加 BodyAnim 到 PlayerController 上：

![](/uploads/images/20230710/13e896c54e76337b1d8514c872cd125d.gif)

点击运行游戏，点击鼠标都可以看到角色正常的跳起来：

![](/uploads/images/20230710/cde3d9bfee7e6879c2f2f54208b939fc.gif)

如果仔细观察的话，现在我们使用的是统一的 _jumpTime = 0.1，实际上两个动画的时长并不一致，因此可以看到如上图奇怪的动画效果，可以通过获取动画剪辑的时长来动态调整 _jumpTime。 这里举个例子：
```
const oneStep = 'oneStep';
const state = this.BodyAnim.getState(oneStep);        
this._jumpTime = state.duration;
twoStep 动画和上文代码类似，最终的 jumpByStep 方法如下所示：

jumpByStep(step: number) {
    if (this._startJump) {
        return;
    }
    this._startJump = true;
    this._jumpStep = step;
    this._curJumpTime = 0;

const clipName = step == 1 ? 'oneStep' : 'twoStep';
    const state = this.BodyAnim.getState(clipName);
    this._jumpTime = state.duration;

this._curJumpSpeed = this._jumpStep * BLOCK_SIZE/ this._jumpTime;
    this.node.getPosition(this._curPos);
    Vec3.add(this._targetPos, this._curPos, new Vec3(this._jumpStep* BLOCK_SIZE, 0, 0));

if (this.BodyAnim) {
        if (step === 1) {
            this.BodyAnim.play('oneStep');
        } else if (step === 2) {
            this.BodyAnim.play('twoStep');
        }
    }
}
```
这里使用到了三元表达式 condition ? A:B 相当于条件满足时调用 A 反之调用 B

![](/uploads/images/20230710/4aa55233b3ef22c82cccac415e9b245a.gif)

该分类下的相关小册推荐：

暂无相关推荐.