让蔡徐坤来教你实现游戏中的帧动画（中）

在上一篇介绍帧动画的文章中，我们已经介绍了如何给一个节点添加帧动画，忘记的小伙伴可以再去看看：让蔡徐坤来教你实现游戏中的帧动画（上），那么今天我们来给大家讲解一下如何通过脚本控制帧动画。

由于官网对通过脚本控制帧动画的讲解还是比较清晰的，这篇文章主要是带大家使用一下这些 API，想具体了解的小伙伴可以去官网查看：https://docs.cocos.com/creator/manual/zh/animation/scripting-animation.html，本文用到的资源可以去公众号后台回复「蔡徐坤」获得，下面正文开始：

1.首先创建一个主界面，可以在上篇文章的基础上直接进行修改，主要是添加了 10 个控制按钮，用于实现对 player 的不同控制，如果对 Button 组件使用不是特别熟悉的同学，可以去看一下我之前写的 Button 组件使用的讲解：UI 组件 | Button，Button 节点的名字按照图中顺序命名即可，对应 Scene 中是按照从左往右，从上往下排列的：

2.添加好按钮后，还需要再添加一个帧动画，因为这次我们要同时实现对两个帧动画的控制：

2.1 新创建一个 rotation 动画，将 Clips 修改为 2；

2.2 将两个动画拖到属性面板对应位置上，开始对 rotation 动画进行编辑，play 动画使用之前的即可；

2.3 添加一个 rotation 属性；

2.4 分别在 0 秒和 2 秒的位置添加关键帧；

2.5 最后将 2 秒位置的关键帧在属性面板将 rotation 属性大小设置为 360。

3.下面开始编写脚本：

3.1 播放 play 动画：

 cbPlayPlay(){
    var anim = this.node.getChildByName('player').getComponent(cc.Animation);
    anim.play('play');
},

注：在对动画操作之前，首先要获取 Animation 组件，下面不再对这个进行说明。

只需调用 play( ) 方法即可，如果不设置制定动画，并且有设置 defaultClip 的话，则会播放 defaultClip 动画：

anim.play();

还可以设置从第几秒开始播放：

anim.play('play', 1);

3.2 播放 rotation 动画：

cbPlayRotation(){
    var anim = this.node.getChildByName('player').getComponent(cc.Animation);
    anim.play('rotation');
},

使用 play 接口播放一个动画时，如果还有其他的动画正在播放，则会先停止其他动画，如果 play 动画正在播放中，播放 rotation 动画，play 动画就会停止播放。

3.3 & 3.4 同时播放 play 和 rotation 动画：

// 同时播放 play
cbPlayAdditivePlay(){
    var anim = this.node.getChildByName('player').getComponent(cc.Animation);
    anim.playAdditive('play');
},

// 同时播放 rotation
cbPlayAdditiveRotation(){
    var anim = this.node.getChildByName('player').getComponent(cc.Animation);
    anim.playAdditive('rotation');
},

除了使用 play( ) 之外，还可以使用 playAdditive( ) 方法对动画进行播放，使用 playAdditive 播放动画时，不会停止其他动画的播放。如果还有其他动画正在播放，则同时会有多个动画进行播放。如果 play 动画正在播放中，播放 rotation 动画，可以发现 play 动画不会停止播放。

3.5 & 3.6 & 3.7 暂停、停止和恢复：

// 暂停 play
cbPause(){
    var anim = this.node.getChildByName('player').getComponent(cc.Animation);
    anim.pause('rotation');
},

// 停止播放所有动画
cbStop(){
    var anim = this.node.getChildByName('player').getComponent(cc.Animation);
    anim.stop();
},

// 恢复所有动画
cbResume(){
    var anim = this.node.getChildByName('player').getComponent(cc.Animation);
    anim.resume('rotation');
},

可以通过 pause( )、stop( ) 和 resume( ) 实现对动画暂停、停止和恢复的控制：

暂停会暂时停止动画的播放，当恢复动画的时候，动画会继续从当前时间往下播放。而停止则会终止动画的播放，再对这个动画进行播放的时候会重新从开始播放动画。

注：resume( ) 只会恢复暂停的动画，对已经停止的动画没有作用。

3.8 设置动画当前时间：

cbSetCurrentTime(){
    var anim = this.node.getChildByName('player').getComponent(cc.Animation);
    anim.setCurrentTime(1,'rotation');
},

可以在任何时候使用 setCurrentTime(1,‘clip’) 对动画设置当前时间，但是动画不会立刻根据设置的时间进行状态的更改，需要在下一个动画的 update 中才会根据这个时间重新计算播放状态。

3.9 & 3.10 设置播放次数和循环次数：

// 修改播放速度为2
cbSpeed(){
    var anim = this.node.getChildByName('player').getComponent(cc.Animation);
    var animState = anim.getAnimationState('rotation');
    animState.speed = 2;
},

// 设置循环次数为2
cbRepertCount(){
    var anim = this.node.getChildByName('player').getComponent(cc.Animation);
    var animState = anim.getAnimationState('rotation');
    animState.repeatCount = 2;
},

首先引入一个 AnimationState 的概念：

如果说 AnimationClip 作为动画数据的承载，那么 AnimationState 则是 AnimationClip 在运行时的实例，它将动画数据解析为方便程序中做计算的数值。 Animation 在播放一个 AnimationClip 的时候，会将 AnimationClip 解析成 AnimationState。 Animation 的播放状态实际都是由 AnimationState 来计算的，包括动画是否循环，怎么循环，播放速度 等。

那么如何获取 AnimationState 呢？Cocos 提供了两种获取的方式：

var anim = this.getComponent(cc.Animation);
// play 会返回关联的 AnimationState
var animState = anim.play('test');

// 或是直接获取
var animState = anim.getAnimationState('test');

之后就可以通过获取到的 AnimationState 对 Animation 的播放状态进行改变了，本文只是设置了播放次数和循环次数，感兴趣的小伙伴还可以对其他状态进行改变。

附完整脚本：

// main.js

cc.Class({
    extends: cc.Component,

    properties: {
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        this.node.getChildByName('play-play').on('click',this.cbPlayPlay,this);
        this.node.getChildByName('play-rotation').on('click',this.cbPlayRotation,this);
        this.node.getChildByName('play-addtive-play').on('click',this.cbPlayAdditivePlay,this);
        this.node.getChildByName('play-addtive-rotation').on('click',this.cbPlayAdditiveRotation,this);
        this.node.getChildByName('pause-play').on('click',this.cbPause,this);
        this.node.getChildByName('stop-all').on('click',this.cbStop,this);
        this.node.getChildByName('resume-all').on('click',this.cbResume,this);
        this.node.getChildByName('setCurrentTime').on('click',this.cbSetCurrentTime,this);
        this.node.getChildByName('speed').on('click',this.cbSpeed,this);
        this.node.getChildByName('loop').on('click',this.cbRepertCount,this);
    },

    start () {

    },

    // update (dt) {},

    // 播放 play
    cbPlayPlay(){
        console.log('0');
        var anim = this.node.getChildByName('player').getComponent(cc.Animation);
        anim.play('play');
    },

    // 播放 rotation
    cbPlayRotation(){
        console.log('1');
        var anim = this.node.getChildByName('player').getComponent(cc.Animation);
        anim.play('rotation');
    },

    // 同时播放 play
    cbPlayAdditivePlay(){
        console.log('2');
        var anim = this.node.getChildByName('player').getComponent(cc.Animation);
        anim.playAdditive('play');
    },

    // 同时播放 rotation
    cbPlayAdditiveRotation(){
        console.log('3');
        var anim = this.node.getChildByName('player').getComponent(cc.Animation);
        anim.playAdditive('rotation');
    },

    // 暂停 play
    cbPause(){
        console.log('4');
        var anim = this.node.getChildByName('player').getComponent(cc.Animation);
        anim.pause('rotation');
    },

    // 停止播放所有动画
    cbStop(){
        console.log('5');
        var anim = this.node.getChildByName('player').getComponent(cc.Animation);
        anim.stop();
    },

    // 恢复所有动画
    cbResume(){
        console.log('6');
        var anim = this.node.getChildByName('player').getComponent(cc.Animation);
        anim.resume('rotation');
    },

    // 设置 rotation 当前时间为第一秒
    cbSetCurrentTime(){
        console.log('7');
        var anim = this.node.getChildByName('player').getComponent(cc.Animation);
        anim.setCurrentTime(1,'rotation');
    },

    // 修改播放速度为2
    cbSpeed(){
        console.log('8');
        var anim = this.node.getChildByName('player').getComponent(cc.Animation);
        var animState = anim.getAnimationState('rotation');
        animState.speed = 2;
    },

    // 设置循环次数为2
    cbRepertCount(){
        console.log('9');
        var anim = this.node.getChildByName('player').getComponent(cc.Animation);
        var animState = anim.getAnimationState('rotation');
        animState.repeatCount = 2;
    },
});

4.之后将编写好的脚本挂载到 Canvas 就可以运行了，图中我只是简单的进行了一下操作，具体操作小伙伴们可以自己尝试：

---

推荐阅读：

让蔡徐坤来教你实现游戏中的帧动画（上）

UI 组件 | Button

一文教你实现「飞机大战」里战机的控制逻辑

一文带你实现游戏中的音乐、音效设置

---

我是「Super于」，立志做一个每天都有正反馈的人！

​