前序

在Cocos Creator游戲開發(fā)中， 動(dòng)畫特效的使用非常頻繁，而動(dòng)畫特效的操作對(duì)初學(xué)者來(lái)說(shuō)又相對(duì)復(fù)雜，所以，初學(xué)者一定要引起重視。

一、動(dòng)畫編輯器使用

1: 創(chuàng)建一個(gè)節(jié)點(diǎn);

2: 為這個(gè)節(jié)點(diǎn)添加一個(gè)動(dòng)畫組件 cc.Animation;

3: 為這個(gè)動(dòng)畫組件新建一個(gè)動(dòng)畫文件 --> AnimationClip對(duì)象;

4: cc.Animation 控制面板的屬性:

1. ?`(1): defaultAnimClip: 默認(rèn)的播放的動(dòng)畫剪輯;`2. ?`(2): Clips: 動(dòng)畫剪輯的數(shù)組集合`3. ?`(3): Play onLoad: 是否在加載的時(shí)候開始播放;`

切記，一定要設(shè)置default Clip才會(huì)有加載時(shí)播放效果。

二、動(dòng)畫編輯器的原理

1: 時(shí)間軸

2: 在不同的時(shí)刻，調(diào)整節(jié)點(diǎn)以及孩子節(jié)點(diǎn)的不同的屬性的值，然后創(chuàng)建出補(bǔ)間動(dòng)畫;

3: 節(jié)點(diǎn)調(diào)動(dòng)畫的屬性:

位置, 縮放, 旋轉(zhuǎn), 大小, 顏色, 透明度, 錨點(diǎn), 扭曲, ...;

4: 動(dòng)畫編輯器也可以調(diào)節(jié)節(jié)點(diǎn)的子節(jié)點(diǎn)

5: 動(dòng)畫參數(shù):

1. ?`Simaple: 1秒多少幀, Speed: 速度,播放速度,越小越慢,`2. ?`wrapMode: Normal, Loop, PingPong, Reverse, LoopReverse, PingPongReverse;`

6: 動(dòng)畫

1. ?`(1)添加動(dòng)畫屬性`2. ?`(2)添加關(guān)鍵幀/刪除關(guān)鍵幀,選到關(guān)鍵幀，在屬性編輯器上編輯和修改;`3. ?`(3)編輯補(bǔ)間動(dòng)畫曲線路徑;`

三、Animation組件

1: 代碼中獲得cc.Animation組件:

1. ?`編輯器關(guān)聯(lián); ? ? ? ? 代碼獲取組件;`

2: Animation組件主要的方法:

play([name], [start_time]), 播放指定的動(dòng)畫，沒(méi)有指定就播放默認(rèn)的動(dòng)畫; playAdditive: 與play一樣，但是不會(huì)停止當(dāng)前播放的動(dòng)畫; stop([name]): 停止指定的動(dòng)畫，如果沒(méi)有指定名字就停止當(dāng)前播放的動(dòng)畫; pause/resume: 暫停喚醒動(dòng)畫; getClips: 返回組件里面帶的AnimationClip數(shù)組

3: Animation重要的屬性:

1. ?`defaultClip: 默認(rèn)的動(dòng)畫剪輯;`2. ?`currentClip: 當(dāng)前播放的動(dòng)畫剪輯;`

4: Animation播放事件: 動(dòng)畫組件對(duì)象來(lái)監(jiān)聽(tīng)on，不是節(jié)點(diǎn)

play : 開始播放時(shí) ****stop?: 停止播放

pause?: 暫停播放時(shí)?resume?: 恢復(fù)播放時(shí)

lastframe : 假如動(dòng)畫循環(huán)次數(shù)大于 1，當(dāng)動(dòng)畫播放到最后一幀時(shí) finished?: 動(dòng)畫播放完成時(shí)

1. ?`const {ccclass, property} = cc._decorator;`3. ?`@ccclass`4. ?`export default class GameMgr extends cc.Component {`6. ?` ? ?@property({type:cc.Animation, tooltip:"動(dòng)畫組件"})`7. ?`myAnim : cc.Animation = null;`9. ?` ? ?start () {`10. ?` ? ? ? ?this.myAnim = this.node.getChildByName("AnimationNode").getComponent(cc.Animation);`11. ?`//this.myAnim.play(); ? ? ? // 播放默認(rèn)clip`12. ?` ? ? ? ?this.myAnim.play("anim_02", 0.25); ? ? ? // 播放默認(rèn)clip`14. ?` ? ? ? ?let clips : cc.AnimationClip[] = this.myAnim.getClips();`15. ?` ? ? ? ?for(let i=0; i<clips.length; i++){`16. ?` ? ? ? ? ? ?console.log(clips[i]);`17. ?` ? ? ? ?}`19. ?` ? ? ? ?// 動(dòng)畫的事件監(jiān)聽(tīng)`20. ?` ? ? ? ?let self = this.myAnim;`21. ?` ? ? ? ?this.myAnim.on("play",function(){`22. ?` ? ? ? ? ? ?console.log("動(dòng)畫組件已經(jīng)開始播放", self.defaultClip, self.currentClip);`23. ?` ? ? ? ?}.bind(this), this);`24. ?` ? ?}`25. ?`}`

四、動(dòng)畫里面調(diào)用代碼函數(shù)

1: 插入一個(gè)事件到動(dòng)畫里面; 2: 編輯這個(gè)時(shí)間觸發(fā)的函數(shù): 名字 + 參數(shù) 3: 遍歷當(dāng)前動(dòng)畫組件所掛節(jié)點(diǎn)上面所有的腳本或組件，根據(jù)這個(gè)名字來(lái)觸發(fā)函數(shù); 4: 要慎用，代碼和動(dòng)畫之間不宜太多的調(diào)用;