怎樣用更少的美術成本創造出更生動的動畫效果？今天就為大家介紹一套開源的2D骨骼動畫框架和工具——DragonBones，它包含了桌面骨骼動畫製作工具DragonBonesPro和一套多語言版本的DragonBones骨骼動畫庫。

下面為大家介紹DragonBones的常用術語和使用方法。

一、DragonBones 2D骨骼動畫中的常用術語

• 骨架：骨架Armature,是2D骨骼動畫中最常用的名詞，一般指的是由很多骨骼組成的一個整體。DragonBones中同時代表一個可以包含動畫的角色。

• 骨骼（骨頭）：骨格或骨頭Bone,是骨骼動網中組成骨架的最重要的一個基礎單元。骨頭自身不能拆解，在骨架中可以進行相對的平移、旋轉、縮放、運動，組合起來就形成了骨格動畫。另外骨骼之間可以有父子關係。一般來說，在預設正向動力學的情況下，父骨骼運動會帶動子骨骼一起運動、比如一個人物舉起大臂，那小臂作為大臂的子骨骼，也會隨之被擡起。

• 插槽：插槽是骨骼動畫中顯示圖片的容器，隸屬於骨骼。每個插槽可以包含多張圖片，但是同一時間只顯示一張圖片。每個骨格可以包含多個插槽。插槽連結了骨骼這個動畫邏輯單元和圖片這個動畫顯示單元，組成了骨骼-插槽-圖片，這個DragonBones骨骼動畫中的基本骨骼結構。

• 圖片(紋理)：圖片就是顯示影象的元素，在2D骨骼系統中，圖片和紋理的意義區別不大，所以這裡也可以叫紋理。

• 紋理集：紋理集是將圖片打包之後組成的大圖，方便資源整合傳播和在遊戲中載入，使用硬體加速引擎或者Egret Runtime 的話，紋理集能大幅度提高渲染效率。所以DragonBones預設提供的匯入資源的介面就是用紋理集。

• 動畫補間：一般設計師在做骨骼動畫的時候，並不需要在每幀都為角色擺動作，而只是在一些關鍵的地方(關鍵幀)擺出關鍵的動作，關鍵動作之間全部由程式生成的補間代替，這就是動畫補間。動畫補間可以是線性的也可以是非線性的。線性補間意味著補間上的元件是勻速變換的(平移、旋轉、縮放)。非線性補間般由各種曲線表示，DragonBones 中預設使用貝塞爾曲線表示非線性補間。

• 動畫過渡：動畫過渡是指從一個動畫切換到另一一個動畫時，產生的過渡效果。DragonBones提供了動畫動面切換時的過渡效果功能，只要設定一個過渡時間，就能自動生成平滑的過渡效果。

• 動畫融合：動面融合提供了一個角色同時播放多個動畫的功能。這個功能一般會在兩種情況下使用。第1種是如一個人物角色動畫比較複雜，可能需要上半身和下半身分別做動畫設計，然後可以任意組合。第2種是如需要個角色在跑步的同時中彈，身體後仰，也就是同時插放跑步和中彈的動畫。動畫融合的功能通過給不同的動畫設定權值，給不同的骨路增加動畫遮罩來實現這兩種需求。需要注意的是DragonBones只有普通模式提供了動畫融合的功能，極速模式是不提供這個功能的。

• 正向動力學(FK)和反向動力學(IK)：在骨骼動畫中，一般來講，子骨骼的運動會受到父骨骼的影響，例如大臂旋轉，小臂也會跟隨旋轉，這叫作正向動力學，也就是父親影響孩子。當然現實世界也存在反過來的情況，例如有入打你一拳，你用小臂去阻擋，那小臂受力運動的同時也會帶動大臂一同做受力運動，這叫作反向動力學。在DragonBones中控制骨路調節動作的時候，一般情況骨骼是符合正向動力學規律的，也就是調節父骨骼，子骨骼也會受影響。如果希望通過反向動力學調節動畫，可以選選擇相應的IK工具來實現。

首先，安裝完成後開啟歡迎介面，選擇專案，如圖1所示。

然後開啟你所選擇的專案，如圖2所示。

接下來為大家解讀圖2中各項工具的使用方法

1.系統工具欄

系統工具欄包含最常用的幾個功能，從左到右的按鈕功能依次是：新建專案、開啟專案、儲存專案、撤銷、重做、匯入、匯出、預覽作品分享，如圖3所示。

·        新建專案：用於新建一個專案 ,單擊該按鈕開啟新建專案對話方塊。

·        開啟專案：用於開啟一個已有專案，單擊該按鈕開啟系統指定檔案對話方塊。

·        儲存專案：如果當前的專案有更改，儲存專案按鈕將亮起，單擊該按鈕後將儲存當前專案，專案儲存後，儲存專案按鈕暗掉。

·        撤銷：用於撤銷上一次的編輯操作。

·        重做：用於重做上一次撤銷掉的編輯操作。

·        匯入：用於匯入一個支援的專案檔案格式，單擊該按鈕將開啟匯入對話方塊

·        匯出：用於匯出專案。單擊該按鈕將開啟匯出對話方塊。

·        預覽：在瀏覽器中預覽動畫的執行效果。如果專案包含多個動畫剪輯，可以在瀏覽器中單擊滑鼠左鍵來切換。

·        作品分享：開啟作品分享上傳頁面。

2. 主場景工具欄

主場景工具欄用於場景操作中滑鼠模式的切換，由左到右依次為:選擇工具、Pose工具、手型工具、建立骨骼工具，如圖4所示。

·        選擇工具：選中骨骼時，滑鼠單擊骨骼本身，按住左鍵移動，可以在X、Y方向任意移動骨骼。滑鼠單擊紅色X軸(或綠色Y軸)可以在單一X軸(Y軸)方向上平移。滑鼠拖動插槽內的圖片本身，按住左鍵移動，可以在X、Y任意方向上移動骨骼。滑鼠單擊紅色X軸(或綠色Y軸)可以在單X軸(Y軸) 方向上平移。滑鼠拖動縮放手柄可以縮放插槽。滑鼠單擊並按住其他區域時可以旋轉插槽(插槽只有在骨架裝配模式下可以被選中並改變狀態)。

·        Pose工具：選中一個骨骼時，骨骼會跟隨著滑鼠的拖拽旋轉。複選兩根或以上骨骼時，選中的骨骼會遵循IK規則，跟隨著滑鼠的拖拽。

·        建立骨骼工具：選中建立骨骼工具，在主場景中單擊滑鼠左鍵並拖拽便可建立骨骼。另外在主場景中還支援一些常用操作：

推拉滑鼠滾輪便可以縮放DragonBones Pro的場景。

滑鼠處於選擇工具或手型工具時，左鍵雙擊任意處， 場景大小便恢復到100%。

右鍵單擊任意區域取消選擇。

·        權重工具：權重表示了蒙皮受到不同骨骼形變影響的佔比，合理分配好每個蒙皮頂點的權重至關重要。

3.可見可選過濾面板

可見可選過濾面板用於開啟和關閉骨骼和插槽的可見、可選、是否繼承編輯的開關，如圖5所示。

·        可見：開啟時，骨骼或插槽在主場景中可見；關閉時，骨骼或插槽在主場景中不可見。

·        可選：開啟時，骨骼或插槽在主場景中可以被選中；關閉時，骨骼或插槽在主場景中不可以被選中。

·        繼承：開啟時，骨骼或插槽會繼承父骨骼的編輯；關閉時，骨骼或插槽不會繼承父骨骼的編輯。

4.變換面板

變換面板用來顯示和修改骨骼或插槽的X、Y座標(相對於父骨骼)、縮放比例、旋轉角度以及圖片的尺寸（僅限插槽和圖片時顯示)。變換面板如圖6所示。

5.場景樹面板

場景樹面板用於顯示和編輯主場景中骨骼和插槽的父子樹型關係，如圖7所示。

右上角按鈕依次為：智慧過濾、骨格建立按鈕和刪除按鈕。骨架裝配模式下，雙擊場景樹中的骨骼或插槽會彈出重新命名視窗。此面板在骨架裝配和動畫製作下均可顯示，但在動畫製作下不可編輯。骨骼和插槽可以在場景樹中複選。

以下是骨骼繼成關係在場景樹中的編輯：

·        骨骼間的繼承關係可以通過在場景樹面板內拖拽改變。

·        子骨骼可以被拖拽到同級或父及其以上的骨骼下。

·        父骨骼不能被拖拽到它的子骨骼及其以下骨骼下

6.層級面板

層級面板用於顯示和編輯主場景中插槽的上下層級關係。可以通過拖拽改變插槽間的層級關係。選中插槽後，也可以單擊右上角的向上一層和向下一層按鈕或快捷鍵[]來改變層級關係，此面板只出現在骨架裝配模式下。層級面板如圖8所示。

7.資源面板

專案所使用的所有圖片都儲存在資源面板中。DragonBonesPro每個專案的資源庫都對應一個系統中實際存在的資料夾，資料夾中DragonBones Pro所支援的PNG圖片都會被顯示在資源面板中。通過由系統其他資料夾向DragonBones Pro的資源面板中拖拽PNG檔案的方法，向資源庫裡新增圖片；相應的PNG檔案也會被複制到對應的資源庫資料夾中。也可以單擊“匯入資源”按鈕，在彈出的系統視窗中指定要新增的資源PNG檔案。資源面板如如圖9所示。

右上角按鈕依次為：匯入資源按鈕、開啟庫資料夾按鈕和修改路徑按鈕。此面板只可以在骨架裝配模式下顯示。

8.編輯模式切換按鈕

編輯模式切換按鈕在場景的左上角，用於切換骨架裝配和動畫製作，如圖10所示。

9.動畫面板

動畫面板用於顯示和編輯動畫剪輯，如圖11所示。

右上角按鈕依次為：新建動畫剪輯按鈕、克隆動畫剪輯按鈕、重新命名和刪除動畫剪輯按鈕。此面板只能在動畫製作下顯示。動畫面板下邊的3個引數分別是：

·        動畫時間：不可編輯，單位為s。動畫剪輯的實際持續時間依照幀率和動畫剪輯的總幀數計算得出。

·        過度時間：預設值為0，可編輯，單位為s。用來設定遊戲中不同動面間的過度時間。

·        播放次數：預設值為0，可編輯。用來設定遊戲中動畫的重複次數，當設為0時表示無限大重複。

10.時間軸面板

時間軸面板用於動畫剪輯的編輯，此模板只能在動畫製作下顯示，如圖12所示。

·        播放控制工具

時間軸面板上的播放控制工具，用於控制動畫剪輯的播放。由左向右依次為：回到首幀按鈕、前一幀按鈕、倒放按鈕、播放按鈕、下一幀按鈕、最後幀按鈕、播放速度控制滑塊、當前幀、當前時間、幀率，如圖13所示。播放速度控制滑塊的控制範圍是0.1x~10x。當前幀：可編輯，輸入具體的幀數，綠色播放指標便會跳轉到相應的幀數。拖動綠色指標或播放動圈，當前幀的數值也會跟著相應變化。當前時間：不可編輯，基於當前幀和幀率計算得出。幀率：可編輯，預設為24fps。設定每秒鐘的動畫有多少幀，如圖13所示。

·        幀編輯工具欄

幀編輯工具欄，由左到右依次為：刪除非必要幀、編輯多幀、洋蔥皮按鈕、向右移動幀、向左移動幀、自動關鍵幀按鈕、曲線編輯器、如圖14所示。

刪除非必要幀：自動排查整個時間軸內的非必要關鍵幀並刪除。刪除非必要關鍵幀可以在完全不影響動畫呈現效果的前提下給動畫檔案瘦身。

洋蔥皮按鈕：開關洋蔥皮功能。

編輯多幀：多選幀可批量編輯曲線 。

向左移動關鍵幀，向右移動關鍵幀：單擊按鈕將整休移動選中關鍵幀以右(左)的所有關鍵幀。若左側的上頓已有關鍵幀，則不能再向左移動，向左移動關鍵幀按鈕將變灰，右側亦然。

自動關鍵幀按鈕：該按鈕具有開關兩種狀態，白色為關，紅色為開。開啟後，對骨骼或插槽的改動將會在綠色播放指標所在幀和相應的骨骼或插槽層上自動新增關鍵幀。

曲線編輯器：曲線編輯器在這個面板中，你可以對幀與幀間的補間應用實現不同的補間效果。

·        時間軸工具欄

時間軸工具欄，由左向右依次為：摺疊列表、展開列表、複製幀按鈕、剪下幀按鈕、貼上幀按鈕、刪除幀按鈕，如圖15所示。

摺疊列表：摺疊時間軸上所有的層。

展開列表：展開時間軸上所有的層。

複製幀按鈕：選中關鍵幀後單擊該按鈕，幀的引數便被複制到剪貼簿中。

剪下幀按鈕：選中關鍵幀後單擊該按鈕，幀的引數便被剪下到剪貼簿中。

貼上幀按鈕：剪貼簿中的幀引數可以被貼上到時間軸的任意幀數、任意層(骨骼層和插槽層的幀不能互相貼上，關鍵幀中記錄的引數是與上一個關鍵幀的相對變動值，0幀的相對變動值為0)，也可以覆蓋已存在關鍵幀。

刪除幀按鈕：刪除當前選中幀。

新增關鍵幀按鈕：該按鈕具有3種狀態按鈕，白色表示無改動，無關鍵幀。黃色表示有改動，未新增或更新關鍵幀。紅色表示無改動已新增或更新關鍵幀。白色或黃色狀態下，單擊該按鈕，將在綠色播放指標所在幀和相應骨骼層或插槽層上新增或更新關鍵幀。紅色狀態下點選無效果。紅色或白色狀態下，改動骨骼或插槽，該按鈕將變為黃色狀態，表示骨骼或插槽發生改動。無骨骼或插槽選中時，該按鈕不可用。

曲線圖面板按鈕:開關曲線圖面板。

·        時間軸縮放工具

時間軸縮工具用於控制時間軸的比例縮放，如圖16所示。左側為適合螢幕按鈕，—和+按鈕控制縮小和放大拖動滑塊也可以控制縮放。如圖16所示。

·        洋蔥皮工具

開啟洋蔥皮功能後，會同時顯示前後N幀（預設為3幀)的影圖，方便動畫師更好地定位角色動作，使連續動畫更流暢。進入動畫模式，單擊時間軸工具欄上的洋蔥皮按鈕開啟洋蔥皮功能，如圖17所示。

洋蔥皮功能開啟後，主場景上的動畫出現藍色（前導幀）和紅色（後續幀）的影圖，動畫呈現影圖效果，如圖18所示。

同時，時間軸的綠色播放指標會出現前後預設覆益3幀的洋蔥皮顯示區城、左側的調整手柄為紅色，右側的調整手柄為藍色，如圖19所示。

拖動藍色或紅色手柄可以調整藍色或紅色洋蔥皮顯示的幀數。覆蓋的幀數越多，在主場餐中顯示的影圖越多。洋蔥皮顯示區會隨著綠色播放指標的移動而移動。在動畫播放過程中，綠色播放指標上的洋蔥皮顯示區域會隱藏。主場景上，紅色和藍色的影圖會隨原始動畫一起播放，藍色影圖的動畫動作超前於原始動畫，紅色影圖的動畫動作後滯於原始動畫。洋蔥皮的特性：藍色或紅色的洋蔥皮顯示區域最長不能超過動畫剪輯本身的長度。雖然動畫剪輯預設迴圈播放、但當綠色播放指標在第0幀的時候，主場景中沒有紅色洋蔥皮影圖顯示。當綠色插放指標在最末一幀時，主場景中沒有藍色洋蔥皮影圖顯示。

·        時間軸

骨骼層內關鍵幀為白色，插槽層內關鍵幀為黃色，事件層內關鍵幀為紅色，含有事件、跳轉、聲音的骨骼關鍵幀為粉色。時間軸的第一層為動面的排層，不能直接編輯，在其他任意層新增關鍵幀後，動畫剪輯層便會出現菱形方塊，表示當前幀下某層或多層存在關鍵幀。白色表示為骨骼層關鍵幀，黃色表示插槽層關鍵幀，紅色為事件層關鍵幀，粉色為存在多種層混合的天鍵幀。選中菱形方塊便選中這一幀數下的所有關鍵幀。可以進行整體左右平移、拖拽、複製、剪下、貼上、刪除。只要相應幀數下存在關鍵幀，時間軸標尺上便會出現紅線，時間軸標尺個會隨時間軸的上下滾動條滾動，始終可見。時間軸的第一級為骨骼層或事件層，第二級為插槽層，插槽層相對骨骼層向右縮排一層。時間軸內不體現父子骨骼的層級關係。事件層只有一層。選中的層會高亮，對應層的骨骼或插槽也會被選中，反之，選中骨骼或插槽，對應的層也會被選中。關鍵幀可以在時間軸同層內任意拖拽。時間軸面板如圖20 所示

·        曲線編輯器

曲線編輯器在這個面板中，你可以對幀與幀間的補間應用實現不同的補間效果。例如，你希望一個人物跑步動作中手臂的擺動是先快後慢、那麼你可以在手臂擺動動作的前兩個關鍵幀中選擇第一個關鍵幀，然後單擊時間軸上的曲線按鈕如圖21所示，開啟曲線編輯器面板。

關鍵幀之間預設使用的是線性補間。在曲線編排器中就是一條直線。你可以在面板的最下方看到一排按鈕，是工具中預設的一些緩動效果，如圖22所示。

單擊這些按鈕能夠使曲線快速變成相應的效果，從左至右依次是：無補間、線性補間、談入、談出、淡入談出(淡入代表先慢後快，淡出代表先快後慢，淡入談出代表一快一慢)，如圖23所示。

如果你對這些預設的效果不滿意，也可以通過拖動曲線兩端控制桿上的控制點(白色的空心圓點)來自由調節曲線，如圖24所示。目前控制點只能在100%~200%之間調節，以後的版本會放開這個限制。曲線進入負值區域代表動畫先往反方向執行一段，再正向執行。曲線超過100%代表動畫會超過目標位執行，再反向執行到目標位。

值得一提的是，對曲線的編輯效果，是能夠實時反映到場景的動畫上的，設計師可以一邊播放動畫，一邊調節曲線預覽效果。另外，對曲線的調節是即時更改動畫資料的，並不需要設計師再次單擊關鍵幀按鈕確認修改。如果對修改效果不滿意，可以通過撤銷功能，回到修改之前的狀態。

三、新建動畫專案

DragonBonesPro提供了方便快捷的專案。

1.新建專案

在歡迎首頁開啟新建專案，會彈出一個對話方塊，選擇建立龍骨動畫，如圖25所示。

點選建立龍骨動畫會出現如下幾個選擇：骨骼動畫模板、逐幀動畫模板、補間動畫模板、自定義，如圖26所示。

點選相應的模板在建立欄裡會選擇相對模板，它們只是引數不同，功能是一樣的，你也可以在建立完成專案，在資源裡點選右鍵，出現新建元件，如圖27所示。

點選新建元件，同樣會出現如同圖上選擇，如圖28。

2.圖片新增刪除

由資源庫拖拽圖片到主視窗：

·        如果沒有圖層被選中或選中圖層當前幀已有非空關鍵幀，便會在時間軸自動新增一個以圖片名命名的圖片層。

·        如果選中圖層，當前幀沒有關鍵幀，則當前幀會新增關鍵幀，圖片被加入關鍵幀。

·        如果選中圖層，當前幀為空關鍵幀，圖片將被新增到空關鍵幀，空關鍵幀變為非空關鍵幀。

3.圖層順序

可以在時間軸內拖拽改變圖層的疊加順序。

四、專案的匯入與匯出

匯入專案DragonBones Pro 目前支援匯入多種格式的DragonBones資料檔案(包括json和xml)和資料包檔案(包括png和zip) ，另外DragonBones Pro 支援通過匯入外掛，擴充套件匯入資料的格式。官方自告的Spine 2.x匯入外掛和Cocos1.x匯入外掛就能幫助DragonBones Pro匯入Spine和Cocos的資料檔案。匯入的方法很簡單，只需將需要匯入的資料檔案或資料包檔案拖拽到軟體中即可。如果匯入的是資料檔案，會出現如圖 29所示的介面 。

軟體會智慧地在資料檔案所在的日錄尋找紋理集檔案，如果沒有找到或者找到的不對，記得要手動修改一下路徑，否則會出現找不到圖片的情況。如果匯入的是資料包檔案就不會有找不到紋理集的情況。另外軟體會自動生成專案名，需要修改的話可以手動修改一下。

DragonBonesPro可以將專案導成json或xml格式，圖片可以是紋理集或圖片檔案形式，匯出視窗如圖30所示。

輸出路徑預設為“我的文件+專案名”，使用者可以手動指定，如果匯出 zip包，則包檔案會出現在指定的輸出路徑下。如果匯出專案資料夾，則會在指定的輸出路徑下建立和專案名相同的子目錄，其下包含資料檔案和圖片。輸出比例預設為 1。使用者可以輸入數值來控制匯出專案的縮放。“填充色” 複選框，預設為不勾選(透明背景)狀態，勾選後使用者可以單擊右邊的顏色方塊兒開啟顏色選擇視窗，選擇需要作為背景色的顏色“打包zip” 複選框，預設為不勾選狀態，也就是匯出專案資料夾，勾選後則匯出zip包形式的專案檔案，下面會將psd檔案轉換成DragonBones資料檔案，在DragonBones Pro的安裝目錄中提供了一個指令碼檔案PSExportDB,jsx. 用於將Photoshop中的設計圖匯出皮DragonBones格式資料+圖片。注意：在Mac系統中，需要在應用程式中找到DragonBones Pro.app，然後右鍵單擊選擇顯示包內容。指令碼檔案就在/Contents/Resources/日錄下，匯出的方式如下：在Photshop中開啟設計圖，然後依次在選單中選擇“檔案—>指令碼—>瀏覽”命令，然後在開啟的系統定位例口中找到PSExportDBjsx檔案，選擇開啟，彈出如下對話方塊：

Export PNGs匯出圖片

ExportISON匯出json檔案

Ignore Hidden Layers忽略隱藏圖層

Image Scale整體縮放比例

依照需求設定好，單擊OK按鈕Photoshop便開始匯出，匯出完成後，在設計圖所在的日錄下會生成一個DrgonBmes{PSD的檔名}的目錄，如果你匯出同時勾選PNGs和JSON，其下會有和psd檔案同名的一個json檔案和一個Textuer目錄。Texture下是所有的png圖片檔案。在之後只需將匯出的資料檔案拖進DragonBones Pro設定好圖片日錄，即可完成匯入。匯入後，圖片的相對位置大小和相互間的層級關係都和Photoshop中完全相同。

怎麼樣，通過本篇文章你學會DragonBonesPro工具的基本使用方法和骨骼動畫中的常用術語了嗎？有任何技術問題或者覺得這篇文章對你有所幫助，歡迎留言與我們交流互動。