動畫工具DragonBones的常用術語和使用方法介紹（圖）

這篇文章帶給大家的內容是關於動畫工具DragonBones的常用術語和使用方法介紹（圖），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

怎麼用更少的美術成本創造出更生動的動畫效果？今天就為大家介紹一套開源的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所示。

圖1

然後開啟你所選擇的項目，如圖2所示。

圖2

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

1、系統工具列

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

圖3

新專案：用於新建一個專案 ,點選該按鈕開啟新建專案對話方塊。
開啟項目：用於開啟一個已有項目，按一下該按鈕開啟系統指定檔案對話方塊。
儲存項目：如果目前的項目有更改，儲存項目按鈕會亮起，點擊按鈕後將儲存目前項目，項目儲存後，儲存項目按鈕暗掉。
撤銷：用於撤銷上一次的編輯操作。
重做：用於重做上一次撤銷掉的編輯操作。
匯入：用於匯入一個支援的專案文件格式，按一下該按鈕將開啟匯入對話方塊
匯出：用於匯出專案。單擊該按鈕將開啟導出對話框。
預覽：在瀏覽器中預覽動畫的運作效果。如果項目包含多個動畫剪輯，可以在瀏覽器中按一下滑鼠左鍵來切換。
作品分享：開啟作品分享上傳頁面。

2、主場景工具列

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

圖4

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

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

建立骨骼工具：選取建立骨骼工具，在主場景中按滑鼠左鍵並拖曳便可建立骨骼。另外在主場景中也支援一些常用操作：
推拉滑鼠滾輪便可以縮放DragonBones Pro的場景。
滑鼠處於選擇工具或手型工具時，左鍵雙擊任意處， 場景大小便恢復到100%。
右鍵點選任意區域取消選擇。

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

3、可見可選過濾面板

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

圖5

可見：開啟時，骨骼或插槽在主場景中可見；關閉時，骨骼或插槽在主場景中不可見。
可選：開啟時，骨骼或插槽在主場景中可以被選取；關閉時，骨骼或插槽在主場景中不可以被選取。
繼承：開啟時，骨骼或插槽會繼承父骨骼的編輯；關閉時，骨骼或插槽不會繼承父骨骼的編輯。

4、變換面板

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

圖6

5、場景樹面板

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

圖7

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

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

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

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

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

#6、層級面板

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

圖8

7、資源面板

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

圖9

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

8、編輯模式切換按鈕

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

圖10

9、動畫面板

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

圖11

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

動畫時間：不可編輯，單位為s。動畫剪輯的實際持續時間是根據幀率和動畫剪輯的總幀數計算。
過度時間：預設值為0，可編輯，單位為s。用來設定遊戲中不同動面間的過度時間。
播放次數：預設值為0，可編輯。用來設定遊戲中動畫的重複次數，當設為0時表示無限大重複。

10、時間軸面板

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

圖12

播放控制工具

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

圖13

影格編輯工具列

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

圖14

刪除非必要影格：自動排查整個時間軸內的非必要關鍵影格並刪除。刪除非必要關鍵影格可以在完全不影響動畫呈現效果的前提下為動畫檔案瘦身。
洋蔥皮按鈕：開關洋蔥皮功能。
編輯多幀：多選幀可批次編輯曲線 。
向左移動關鍵幀，向右移動關鍵幀：按一下按鈕將整休移動選取關鍵幀以右(左)的所有關鍵幀。若左側的上頓已有關鍵幀，則無法再向左移動，向左移動關鍵幀按鈕將變灰，右側亦然。
自動關鍵影格按鈕：此按鈕具有開關兩種狀態，白色為關，紅色為開。開啟後，對骨骼或插槽的變更將會在綠色播放指標所在影格和對應的骨骼或插槽層上自動新增關鍵影格。
曲線編輯器：曲線編輯器在這個面板中，你可以對幀與幀間的補間應用實現不同的補間效果。

時間軸工具列

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

圖15

#摺疊清單：摺疊時間軸上所有的圖層。
展開清單：展開時間軸上所有的圖層。
複製影格按鈕：勾選關鍵影格後點選該按鈕，幀的參數便被複製到剪貼簿。
剪下來畫面按鈕：勾選關鍵影格後點選此按鈕，畫面的參數便會剪下到剪貼簿。
貼上幀按鈕：剪貼簿中的幀參數可以被貼上到時間軸的任意幀數、任意層(骨骼層和插槽層的幀不能互相粘貼，關鍵幀中記錄的參數是與上一個關鍵幀的相對變動值，0幀的相對變動值為0)，也可以覆蓋已存在關鍵影格。
刪除幀按鈕：刪除目前選取幀。
新增關鍵影格按鈕：此按鈕有3種狀態按鈕，白色表示無改動，無關鍵影格。黃色表示有改動，未新增或更新關鍵影格。紅色表示無改動已新增或更新關鍵影格。白色或黃色狀態下，按一下該按鈕，將在綠色播放指標所在影格和對應骨骼圖層或插槽圖層上新增或更新關鍵影格。紅色狀態下點選無效果。紅色或白色狀態下，改動骨骼或插槽，按鈕將變為黃色狀態，表示骨骼或插槽發生變化。無骨骼或插槽選取時，此按鈕不可用。
曲線圖面板按鈕：開關曲線圖面板。

時間軸縮放工具

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

圖16

洋蔥皮工具

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

圖17

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

圖18

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

圖19

拖曳藍色或紅色手柄可以調整藍色或紅色洋蔥皮顯示的幀數。覆蓋的幀數越多，在主場餐中顯示的影圖越多。洋蔥皮顯示區會隨著綠色播放指針的移動而移動。在動畫播放過程中，綠色播放指針上的洋蔥皮顯示區域會隱藏。主場景上，紅色和藍色的影圖會隨原始動畫一起播放，藍色影圖的動畫動作超前於原始動畫，紅色影圖的動畫動作後滯於原始動畫。

洋蔥皮的特性：藍色或紅色的洋蔥皮顯示區域最長不能超過動畫剪輯本身的長度。雖然動畫剪輯預設循環播放、但當綠色播放指針在第0幀的時候，主場景中沒有紅色洋蔥皮影圖顯示。當綠色插放指針在最末一格時，主場景中沒有藍色洋蔥皮影圖顯示。

時間軸

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

圖20

曲線編輯器

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

圖21

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

圖22

#點選這些按鈕能夠讓曲線快速變成對應的效果，從左至右依序為：無補間、線性補間、談入、談出、淡入談出(淡入代表先慢後快，淡出代表先快後慢，淡入談出代表一快一慢)，如圖23所示。

圖23

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

圖24

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

三、新動畫專案

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

1、新項目

在歡迎首頁開啟新項目，會跳出一個對話框，選擇建立龍骨動畫，如圖25所示。

圖25

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

圖26

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

圖27

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

圖28

2、圖片新增刪除

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

如果沒有圖層被選取或選取圖層目前幀已有非空關鍵幀，便會在時間軸自動新增以圖片名稱命名的圖片圖層。
如果選取圖層，目前幀沒有關鍵幀，則當前幀會新增關鍵幀，圖片會被加入關鍵幀。
如果選取圖層，目前幀為空關鍵幀，圖片將被添加到空關鍵幀，空關鍵幀變為非空關鍵幀。

3、圖層順序

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

四、專案的導入與匯出

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

圖29

軟體會智慧地在資料檔案所在的日錄尋找紋理集文件，如果沒有找到或找到的不對，記得要手動修改一下路徑，否則會出現找不到圖片的狀況。如果匯入的是資料包檔案就不會有找不到紋理集的情況。另外軟體會自動產生項目名，需要修改的話可以手動修改一下。
DragonBonesPro可以將項目導成json或xml格式，圖片可以是紋理集或圖片檔案形式，匯出視窗如圖30所示。

圖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中完全相同。

以上是動畫工具DragonBones的常用術語和使用方法介紹（圖）的詳細內容。更多資訊請關注PHP中文網其他相關文章！