Animation 組件
之前我們了解了 Cocos Creator 是組件式的結(jié)構(gòu)。那么 Animation 也不例外，它也是節(jié)點(diǎn)上的一個(gè)組件。
Clip 動(dòng)畫剪輯
動(dòng)畫剪輯就是一份動(dòng)畫的聲明數(shù)據(jù)，我們將它掛載到 Animation 組件上，就能夠?qū)⑦@份動(dòng)畫數(shù)據(jù)應(yīng)用到節(jié)點(diǎn)上。
節(jié)點(diǎn)數(shù)據(jù)的索引方式
數(shù)據(jù)中索引節(jié)點(diǎn)的方式是以掛載 Animation 組件的節(jié)點(diǎn)為根節(jié)點(diǎn)的相對(duì)路徑。 所以在同個(gè)父節(jié)點(diǎn)下的同名節(jié)點(diǎn)，只能夠產(chǎn)生一份動(dòng)畫數(shù)據(jù)，并且只能應(yīng)用到第一個(gè)同名節(jié)點(diǎn)上。
clip 文件的參數(shù)
- sample： 定義當(dāng)前動(dòng)畫數(shù)據(jù)每秒的幀率，默認(rèn)為 60，這個(gè)參數(shù)會(huì)影響時(shí)間軸上每?jī)蓚€(gè)整數(shù)秒刻度之間的幀數(shù)量（也就是兩秒之內(nèi)有多少格）
- speed： 當(dāng)前動(dòng)畫的播放速度，默認(rèn)為 1
- duration： 當(dāng)動(dòng)畫播放速度為 1 的時(shí)候，動(dòng)畫的持續(xù)時(shí)間
- real time： 動(dòng)畫從開始播放到結(jié)束，真正持續(xù)的時(shí)間
- wrap mode： 循環(huán)模式
動(dòng)畫編輯模式
動(dòng)畫在普通模式下是不允許編輯的，只有在動(dòng)畫編輯模式下，才能夠編輯動(dòng)畫文件。但是在編輯模式下，無法對(duì)節(jié)點(diǎn)進(jìn)行 增加 / 刪除 / 改名 操作。
打開編輯模式：
- 選中一個(gè)包含 Animation 組件，并且包含有一個(gè)以上 clip 文件的節(jié)點(diǎn)。然后在動(dòng)畫編輯器左上角點(diǎn)擊唯一的按鈕。
退出編輯模式：
- 點(diǎn)擊動(dòng)畫編輯器上點(diǎn)擊左上角的編輯按鈕，或者在場(chǎng)景編輯器左上角的關(guān)閉按鈕
熟悉動(dòng)畫編輯器
動(dòng)畫編輯器一共可以劃分為7個(gè)部分。
![此處輸入圖片的描述][1]
1、常用按鈕區(qū)域，這里負(fù)責(zé)顯示一些常用功能按鈕，從左到右依次為：開關(guān)錄制狀態(tài)、返回第一幀、上一幀、播放/暫停、下一幀、新建動(dòng)畫剪輯、插入動(dòng)畫事件
2、時(shí)間軸與事件，這里主要是顯示時(shí)間軸，添加的自定義事件也會(huì)在這里顯示。
3、層級(jí)管理（節(jié)點(diǎn)樹），當(dāng)前動(dòng)畫剪輯可以影響到的節(jié)點(diǎn)數(shù)據(jù)。
4、節(jié)點(diǎn)內(nèi)動(dòng)畫幀的預(yù)覽區(qū)域，這里主要是顯示各個(gè)節(jié)點(diǎn)上的所有幀的預(yù)覽時(shí)間軸。
5、屬性列表，顯示當(dāng)前選中的節(jié)點(diǎn)在選中的動(dòng)畫剪輯中已經(jīng)包含了的屬性列表。
6、關(guān)鍵幀，每個(gè)屬性相對(duì)應(yīng)的幀都會(huì)顯示在這里
7、動(dòng)畫剪輯的基本屬性，選擇動(dòng)畫剪輯后，基本數(shù)據(jù)都在這里顯示以及更改。
時(shí)間軸的刻度單位表示方式
時(shí)間軸上刻度的表示法是 1:05。該數(shù)值由兩部分組成，冒號(hào)前面的是表示當(dāng)前秒數(shù)，冒號(hào)后面的表示在當(dāng)前這一秒里的第幾幀。
1:05 表示該刻度在時(shí)間軸上位于從動(dòng)畫開始經(jīng)過了 1 秒又 5 幀 的時(shí)間。
因?yàn)閯?dòng)畫幀率（sample）可以隨時(shí)調(diào)整，因此同一個(gè)刻度表示的時(shí)間點(diǎn)也會(huì)隨著幀率變化而有所不同。
當(dāng)幀率為 30 時(shí)，1:05 表示動(dòng)畫開始后 1 + 5/30 = 1.1667 秒。
當(dāng)幀率為 10 時(shí)，1:05 表示動(dòng)畫開始后 1 + 5/10 = 1.5 秒。
雖然當(dāng)前刻度表示的時(shí)間點(diǎn)會(huì)隨著幀率變化，但一旦在一個(gè)位置添加了關(guān)鍵幀，該關(guān)鍵幀所在的總幀數(shù)是不會(huì)改變的， 假如我們?cè)趲?30 時(shí)向 1:05 刻度上添加了關(guān)鍵幀，該關(guān)鍵幀位于動(dòng)畫開始后總第 35 幀。之后把幀率修改為 10，該關(guān)鍵幀仍然處在動(dòng)畫開始后第 35 幀，而此時(shí)關(guān)鍵幀所在位置的刻度讀數(shù)為 3:05。換算成時(shí)間以后正好是之前的 3 倍。
基本操作
更改時(shí)間軸縮放比例
在操作中如果覺得動(dòng)畫編輯器顯示的范圍太小，需要按比例縮小，讓更多的關(guān)鍵幀顯示到編輯器內(nèi)怎么辦？
在圖中2、4、6區(qū)域內(nèi)滾動(dòng)鼠標(biāo)滾輪，可以放大，或者縮小時(shí)間軸的顯示比例。
移動(dòng)顯示區(qū)域
如果想看動(dòng)畫編輯器右側(cè)超出編輯器被隱藏的關(guān)鍵幀或是左側(cè)被隱藏的關(guān)鍵幀，這時(shí)候就需要移動(dòng)顯示區(qū)域：
按住鍵盤 空格 按鍵，并且在圖中2、4、6區(qū)域內(nèi)按下鼠標(biāo)左鍵，向左右拖拽即可。
在圖中2、4、6區(qū)域內(nèi)按下鼠標(biāo)中鍵拖拽。
更改當(dāng)前選中的時(shí)間軸節(jié)點(diǎn)
在時(shí)間軸（圖中2）區(qū)域內(nèi)點(diǎn)擊任意位置或者拖拽，都可以更改當(dāng)前的時(shí)間節(jié)點(diǎn)。
在圖中4區(qū)域內(nèi)拖拽標(biāo)示的紅線即可。
播放/暫停動(dòng)畫
在圖示1中點(diǎn)擊播放按鈕，按鈕會(huì)自動(dòng)變更為暫停，再次點(diǎn)擊則是暫停。
播放狀態(tài)下，保存場(chǎng)景等操作會(huì)終止播放
修改 clip 屬性
在圖示7區(qū)域，修改對(duì)應(yīng)的屬性，在輸入框失去焦點(diǎn)的時(shí)候就會(huì)更新到實(shí)際的 clip 數(shù)據(jù)中。
快捷鍵
left：向前移動(dòng)一幀，如果已經(jīng)在第 0 幀，則忽略當(dāng)前操作
right：向后移動(dòng)一幀
up：跳轉(zhuǎn)到上一個(gè)關(guān)鍵幀
down：跳轉(zhuǎn)到下一個(gè)關(guān)鍵幀
delete：刪除當(dāng)前所選中的關(guān)鍵幀
k：正向的播放動(dòng)畫，抬起后停止
j：反向播放動(dòng)畫，抬起后停止
ctrl / cmd + left：跳轉(zhuǎn)到第 0 幀
ctrl / cmd + right：跳轉(zhuǎn)到有效的最后一幀
[1]: http://www.cocos.com/docs/creator/animation/animation/main.png
