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

2024-03-08 09:56:57

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

由于官网对通过脚本控制帧动画的讲解还是比较清晰的，这篇文章主要是带大家使用一下这些 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 动画：

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

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

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

1 anim.play();

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

1 anim.play('play', 1);

3.2 播放 rotation 动画：

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

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

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

 1 // 同时播放 play
 2 cbPlayAdditivePlay(){
 3     var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 4     anim.playAdditive('play');
 5 },
 6 
 7 // 同时播放 rotation
 8 cbPlayAdditiveRotation(){
 9     var anim = this.node.getChildByName('player').getComponent(cc.Animation);
10     anim.playAdditive('rotation');
11 },

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

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

 1 // 暂停 play
 2 cbPause(){
 3     var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 4     anim.pause('rotation');
 5 },
 6 
 7 // 停止播放所有动画
 8 cbStop(){
 9     var anim = this.node.getChildByName('player').getComponent(cc.Animation);
10     anim.stop();
11 },
12 
13 // 恢复所有动画
14 cbResume(){
15     var anim = this.node.getChildByName('player').getComponent(cc.Animation);
16     anim.resume('rotation');
17 },

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

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

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

3.8 设置动画当前时间：

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

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

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

 1 // 修改播放速度为2
 2 cbSpeed(){
 3     var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 4     var animState = anim.getAnimationState('rotation');
 5     animState.speed = 2;
 6 },
 7 
 8 // 设置循环次数为2
 9 cbRepertCount(){
10     var anim = this.node.getChildByName('player').getComponent(cc.Animation);
11     var animState = anim.getAnimationState('rotation');
12     animState.repeatCount = 2;
13 },

首先引入一个 AnimationState 的概念：

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

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

1 var anim = this.getComponent(cc.Animation);
2 // play 会返回关联的 AnimationState
3 var animState = anim.play('test');
4 
5 // 或是直接获取
6 var animState = anim.getAnimationState('test');

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

附完整脚本：

  1 // main.js
  2 
  3 cc.Class({
  4     extends: cc.Component,
  5 
  6     properties: {
  7     },
  8 
  9     // LIFE-CYCLE CALLBACKS:
 10 
 11     onl oad () {
 12         this.node.getChildByName('play-play').on('click',this.cbPlayPlay,this);
 13         this.node.getChildByName('play-rotation').on('click',this.cbPlayRotation,this);
 14         this.node.getChildByName('play-addtive-play').on('click',this.cbPlayAdditivePlay,this);
 15         this.node.getChildByName('play-addtive-rotation').on('click',this.cbPlayAdditiveRotation,this);
 16         this.node.getChildByName('pause-play').on('click',this.cbPause,this);
 17         this.node.getChildByName('stop-all').on('click',this.cbStop,this);
 18         this.node.getChildByName('resume-all').on('click',this.cbResume,this);
 19         this.node.getChildByName('setCurrentTime').on('click',this.cbSetCurrentTime,this);
 20         this.node.getChildByName('speed').on('click',this.cbSpeed,this);
 21         this.node.getChildByName('loop').on('click',this.cbRepertCount,this);
 22     },
 23 
 24     start () {
 25 
 26     },
 27 
 28     // update (dt) {},
 29 
 30     // 播放 play
 31     cbPlayPlay(){
 32         console.log('0');
 33         var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 34         anim.play('play');
 35     },
 36 
 37     // 播放 rotation
 38     cbPlayRotation(){
 39         console.log('1');
 40         var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 41         anim.play('rotation');
 42     },
 43 
 44     // 同时播放 play
 45     cbPlayAdditivePlay(){
 46         console.log('2');
 47         var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 48         anim.playAdditive('play');
 49     },
 50 
 51     // 同时播放 rotation
 52     cbPlayAdditiveRotation(){
 53         console.log('3');
 54         var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 55         anim.playAdditive('rotation');
 56     },
 57 
 58     // 暂停 play
 59     cbPause(){
 60         console.log('4');
 61         var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 62         anim.pause('rotation');
 63     },
 64 
 65     // 停止播放所有动画
 66     cbStop(){
 67         console.log('5');
 68         var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 69         anim.stop();
 70     },
 71 
 72     // 恢复所有动画
 73     cbResume(){
 74         console.log('6');
 75         var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 76         anim.resume('rotation');
 77     },
 78 
 79     // 设置 rotation 当前时间为第一秒
 80     cbSetCurrentTime(){
 81         console.log('7');
 82         var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 83         anim.setCurrentTime(1,'rotation');
 84     },
 85 
 86     // 修改播放速度为2
 87     cbSpeed(){
 88         console.log('8');
 89         var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 90         var animState = anim.getAnimationState('rotation');
 91         animState.speed = 2;
 92     },
 93 
 94     // 设置循环次数为2
 95     cbRepertCount(){
 96         console.log('9');
 97         var anim = this.node.getChildByName('player').getComponent(cc.Animation);
 98         var animState = anim.getAnimationState('rotation');
 99         animState.repeatCount = 2;
100     },
101 });

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

码农公寓

相关文章