讓蔡徐坤來教你實現遊戲中的幀動畫（下）

拖了將近一個月，終於把幀動畫這部分寫完了，新關注的或者已經忘記的小夥伴能夠看一下以前寫的部分：

讓蔡徐坤來教你實現遊戲中的幀動畫（上）

讓蔡徐坤來教你實現遊戲中的幀動畫（中）

​

今天這個仍是在上一篇的基礎上進行修改的，主要講解的如何在幀動畫中添加事件，Cocos Creator 提供了兩種添加事件的方式：可視化編輯幀事件和動態註冊幀事件，下面將對這兩種方式分別介紹。

 

沒看過官方文檔的小夥伴建議先熟悉一下官方文檔哦！

https://docs.cocos.com/creator/manual/zh/animation/scripting-animation.html

 

1、可視化編輯幀事件

1.因爲是在上篇文章的基礎上進行修改，因此再也不對工程目錄進行介紹，先導入此次要用到的音樂資源 jinitaimei.mp3，而後建立一個文字說明和兩個按鈕：

 

2.而後再編輯一個 jump 的幀動畫，我是隻修改了 position 和 scale 屬性，這個隨意，本身發揮就好，並將動畫拖到 player 節點上（原本是想把跳舞的也作出來的，但想到學會技術纔是重點，因而只是簡單的修改了 position 和 scale 屬性，我不會告訴大家我是太懶的~）：

 

3.綁定動畫後，編寫腳本以下，並將改腳本掛在到 player 節點上（注，若是掛在到非掛載對應動畫節點上將不能獲取到回調函數）：

 1 // animationEvent.js
 2 
 3 cc.Class({  4  extends: cc.Component,  5 
 6  properties: {  7  player: cc.Node,  8  playBt: cc.Node,  9  stopBt: cc.Node, 10  music: { 11             default: null, 12  type: cc.AudioClip 13  } 14  }, 15 
16  onLoad() { 17         this.playBt.on('touchstart', this.cbPlay, this); 18         this.stopBt.on('touchstart', this.cbStop, this); 19 
20         this.anim = this.player.getComponent(cc.Animation); 21  }, 22     
23     // playBt 回調函數
24  cbPlay(event) { 25         this.anim.play('jump'); 26         this.node.parent.getChildByName('label_01').active = false; 27  }, 28 
29     // stopBt 回調函數
30  cbStop(event) { 31         this.anim.stop(); 32         this.player.position = cc.v2(0, 0); 33         this.player.setScale(1); 34  cc.audioEngine.stopMusic(); 35         this.node.parent.getChildByName('label_01').active = true; 36  }, 37 
38     // jump 動畫 play 回調函數
39  onJumpPlay(type, state) { 40         cc.audioEngine.playMusic(this.music, false); 41  }, 42 
43     // jump 動畫 finished 回調函數
44  onJumpFinished(type, state) { 45  cc.audioEngine.stopMusic(); 46         this.anim.play('play'); 47  }, 48     
49     // play 動畫 finished 回調函數
50  onPlayFinished(event) { 51         this.node.parent.getChildByName('label_01').active = true; 52  } 53 });

 

 

4.最後在幀動畫中添加幀事件並綁定對應回調函數就能夠了，將時間線拖到對應關鍵幀位置，點添加關鍵幀按鈕，以後編輯關鍵幀綁定對應回調函數便可（別忘了將對應節點也綁定到屬性面板上啊！）：

 

5.以後能夠欣賞才藝滿滿 CXK 的唱、跳、rap 和籃球了：

 

2、動態註冊幀事件

1.動態註冊事件的話只須要編輯腳本便可，就不須要在編輯器上綁定回調函數了（我發現官方文檔中對單個 cc.AnimationState 註冊回調的方法並不正確，添加後不起做用，只有對組件註冊事件時才正確，所以本身判斷了一下，若是小夥伴知道怎麼處理歡迎評論、私聊我哦！），編寫腳本以下：

 1 // animationEvent.js
 2 
 3 cc.Class({  4  extends: cc.Component,  5 
 6  properties: {  7  player: cc.Node,  8  playBt: cc.Node,  9  stopBt: cc.Node, 10  music: { 11             default: null, 12  type: cc.AudioClip 13  } 14  }, 15 
16  onLoad() { 17         this.playBt.on('touchstart', this.cbPlay, this); 18         this.stopBt.on('touchstart', this.cbStop, this); 19 
20         this.anim = this.player.getComponent(cc.Animation); 21 
22         this.anim.on('play', this.onAniPlay, this);    // 註冊 play 監聽事件
23         this.anim.on('finished', this.onAniFinished, this);    // 註冊 finished 監聽事件
24  }, 25 
26     // playBt 回調函數
27  cbPlay(event) { 28         this.anim.play('jump'); 29         this.node.parent.getChildByName('label_01').active = false; 30 
31  }, 32 
33     // stopBt 回調函數
34  cbStop(event) { 35         this.anim.stop(); 36         this.player.position = cc.v2(0, 0); 37         this.player.setScale(1); 38  cc.audioEngine.stopMusic(); 39         this.node.parent.getChildByName('label_01').active = true; 40  }, 41 
42     // 動畫 play 回調函數
43  onAniPlay(type, state) { 44         let jump = this.anim.getAnimationState('jump'); 45 
46         if (state == jump) {    // 判斷是否是 jump 動畫
47             cc.audioEngine.playMusic(this.music, false); 48  } 49  }, 50 
51     // 動畫 finished 回調函數
52  onAniFinished(type, state) { 53         let jump = this.anim.getAnimationState('jump'); 54         let play = this.anim.getAnimationState('play'); 55 
56         if (state == jump) {    // 判斷是否是 jump 動畫
57  cc.audioEngine.stopMusic(); 58             this.anim.play('play'); 59         } else if (state == play) {    // 判斷是否是 play 動畫
60             this.node.parent.getChildByName('label_01').active = true; 61  } 62  } 63 });

 

 

2.以後能夠欣賞才藝滿滿 CXK 的唱、跳、rap 和籃球了：

 

---

 

推薦閱讀：

讓蔡徐坤來教你實現遊戲中的幀動畫（上）

讓蔡徐坤來教你實現遊戲中的幀動畫（中）

一文教你實現「飛機大戰」裏戰機的控制邏輯

自定義虛擬搖桿組件讓你一勞永逸

 

---

 

我是「Super於」，立志作一個天天都有正反饋的人！

 

原文出處：https://www.cnblogs.com/yu97271486/p/11506461.html