1. 程式人生 > >Cocos Creator 系統學習筆記(十一)cc.Animation元件使用

Cocos Creator 系統學習筆記(十一)cc.Animation元件使用

動畫編輯器使用
1: 建立一個空節點【建議】;
2: 為這個節點新增一個動畫元件 cc.Animation;
3: 為這個動畫元件新建一個動畫檔案 --> AnimationClip物件;
4: cc.Animation 控制面板的屬性:
     (1): default Anim Clip: 預設的播放的動畫剪輯;
     (2): Clips: 動畫剪輯的陣列集合
     (3): Play on Load: 是否在載入的時候開始播放;
5.引數:
Sample:一秒鐘多少幀Speed:速度控制(=1,正常速度;>1加速;<1減慢)

  

動畫編輯器的原理
1: 時間軸
2: 在不同的時刻,調整節點以及子節點的不同的屬性的值,然後創建出補間動畫;
3: 節點調動畫的屬性:
      位置, 縮放, 旋轉, 大小, 顏色, 透明度, 錨點, 扭曲, ...;
4: 動畫編輯器也可以調節節點的子節點 
5: 動畫引數:
     Simaple: 1秒多少幀, Speed: 速度,播放速度,越小越慢, 
     wrapMode:  Normal, Loop(迴圈), PingPong(乒乓,來回), Reverse(反轉), Loop Reverse(迴圈從尾到頭), PingPongReverse;
6:   動畫
            (1)新增動畫屬性
            (2)新增關鍵幀/刪除關鍵幀,選到關鍵幀,在屬性編輯器上編輯和修改;
            (3)編輯補間動畫曲線路徑;

  

Animation元件
1: 程式碼中獲得cc.Animation元件: 
        編輯器關聯; //anim:{ type:cc.Animation, default:null,}
        程式碼獲取元件;//this.anim=this.node.getComponent(cc.Animation);
2: Animation元件主要的方法:
     play([name], [start_time]), 播放指定的動畫,若start_time 不指定預設是0。如果沒有制定就播放預設的動畫;
     playAdditive: 與play一樣,但是不會停止當前播放的動畫;
     stop([name]): 停止指定的動畫,如果沒有指定名字就停止當前播放的動畫;
     pause/resume: 暫停喚醒動畫;
     getClips: 返回元件裡面帶的AnimationClip陣列
3: Animation重要的屬性:
     defaultClip: 預設的動畫剪輯;
     currentClip: 當前播放的動畫剪輯;
4: Animation播放事件:  動畫元件(cc.Animation的元件例項)物件來監聽on,不是節點
// this.anim.on(“play”,function(){}.bind(this),this);
    play : 開始播放時  stop : 停止播放時 pause : 暫停播放時 resume : 恢復播放時
    lastframe : 假如動畫迴圈次數大於 1,當動畫播放到最後一幀時 finished : 動畫播放完成時

  

動畫裡面呼叫程式碼函式
1:插入一個時間到動畫裡面;
2: 編輯這個時間觸發的函式: 名字 + 引數
3: 遍歷當前動畫元件所掛節點上面所有的指令碼或元件,根據這個名字來觸發函式;
4: 要慎用,程式碼和動畫之間不易太多的呼叫;(因為維護的時候不便)
步驟:選擇幀新增事件,後再對應幀的(“倒三角形”)雙擊開啟
2.在彈出介面左側寫新增的函式名,右側新增引數(引數可帶可不帶) 
注:每次播放都會執行