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