Let Cai Xu Kun teach you achieve frame animation (in) the game

In the last frame of the animation presentation article, we've covered how to add a node frame animation, forget the small partners can go to see: Let Cai Xu Kun teach you achieve frame animation (the) game , then today Let's explain to you how to control the script by frame animation.

As the official website of the script control by-frame animation to explain is quite clear, this article is mainly about the band we use these API, would like to know the specific small partners can go to the official website to view: https: //docs.cocos.com/creator/ manual / zh / animation / scripting-animation.html, used in this article can go to public resources No. backstage reply "Cai Xu Kun 'get, start the following text:

1. First create a master interface can be modified directly on the basis of the article, which was mainly added 10 control buttons for implementing various control of the player, if not particularly familiar with the students using the Button component, you can take a look to explain what I wrote before Button component used: the UI components | Button name, Button nodes are named according to the sequence diagram corresponds Scene is from left to right, from the arrangement down:

2. Add the OK button, still need to add a frame animation, because this time we want to achieve control of the two-frame animation at the same time:

2.1 to create a new animated rotation, the Clips revised to 2;

2.2 The two positions corresponding to animation attributes onto the panel, to begin editing rotation animation to play animations before use;

2.3 Add a rotation attribute;

2.4 keyframes were added at 0 and 2 seconds position;

2.5 Finally, the key to a 2 frame in rotation property attributes panel size is set to 360.

3. The following start writing the script:

3.1 player play animation:

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     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 就可以运行了，图中我只是简单的进行了一下操作，具体操作小伙伴们可以自己尝试：

Let Cai Xu Kun teach you achieve frame animation (in) the game

Guess you like