在上一篇介绍帧动画的文章中，我们已经介绍了如何给一个节点添加帧动画，忘记的小伙伴可以再去看看：让蔡徐坤来教你实现游戏中的帧动画（上），那么今天我们来给大家讲解一下如何通过脚本控制帧动画。
由于官网对通过脚本控制帧动画的讲解还是比较清晰的，这篇文章主要是带大家使用一下这些 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 就可以运行了，图中我只是简单的进行了一下操作，具体操作小伙伴们可以自己尝试：
