本書采用案例的方式，循序漸進地帶領讀者認識DragonBones Pro的各項功能。讀者可以在掌握軟件操作的同時，潛移默化地學習H5動畫的創作思路。

本書覆蓋游戲、廣告營銷動畫、動態漫畫三大H5動畫主流應用領域，可作為普通高校動畫、游戲、漫畫等相關專業的教材，也可作為H5動畫從業人員及初學者的參考書。

本書最后增加了附錄部分，系統詳盡地收錄了DragonBones的所有功能，讀者能夠迅速地查找到自己想要的功能。

隨著移動端平臺的興起，業界亟需一種更具兼容性、更加開放的富媒體動畫形式來取代舊有的Flash動畫。在這種情況下，HTML5動畫便應運而生了。相較于此前的互聯網動畫格式，HTML5動畫具備更好的移動端兼容性和互動性，可以說HTML5動畫是未來互聯網動畫的發展趨勢。

隨著HTML5動畫的風靡，越來越多的教育機構和培訓機構開始在課堂中引入有關HTML5動畫的教學。然而，現在市面上大部分教材面向的讀者群體是開發者，主要內容是如何利用JavaScript腳本語言實現動畫效果。實際上，動畫師才是HTML5動畫真正的創作者，技術只是HTML5動畫的基石，HTML5動畫真正的靈魂來源于動畫師的創造力（即他們的設計能力和對運動規律的把握能力），而本書面向的主要讀者群體正是動畫師。

本書講授的軟件為DragonBones Pro 5.0，這是一款所見即所得的HTML5動畫制作軟件，它能讓動畫師擺脫掉代碼的約束，更專注于動畫效果的營造，而且準確便捷地將動畫轉換為HTML5動畫所需的代碼和資源，完美地銜接后續的編程環節。

本書采用案例的方式，循序漸進地帶領讀者認識DragonBones Pro的各項功能，在掌握軟件的同時潛移默化地學習HTML5動畫的創作思路。

本書分為三個部分：第一部分為HTML5動畫制作部分（第1章至第10章）；第二部分為HTML5動畫開發部分（第11章至第14章）；第三部分為附錄（第15章）。

本書面向的讀者群如下：

（1）HTML5動畫制作部分。

 具備一定美術基礎及動畫基礎的人。

 掌握一個或多個數字繪畫軟件（如Adobe Photoshop、Adobe Flash、PaintTool SAI、CorelDRAW）的人。

 熱愛游戲、HTML5廣告和動態漫畫制作的人。

（2）HTML5動畫開發部分。

 具備一定JavaScript基礎的人。

 熱愛游戲、HTML5廣告和動態漫畫制作的人。

如果你是游戲、廣告、動態漫畫團隊中的設計師，閱讀本書可幫助你了解并掌握HTML5動畫的制作方法，讓你制作HTML5動畫的時候更加自由，并使你與團隊成員的工作銜接變得更有效率；如果你是團隊中的開發者，閱讀本書可幫助你了解HTML5動畫的制作思路并掌握開發過程中使用和優化HTML5動畫的方法；如果你是獨立的游戲、廣告或動態漫畫創作者，閱讀本書可幫助你更簡單且更有效率地創作高質量的作品。

本書自第3章起每章都附有一個案例，讀者可以在http://www.dgboyong.cn網站下載案例素材和案例源文件，通過查看案例源文件來檢驗自己的案例掌握程度。

本書由陳菲儀和劉枝秀編寫，具體分工如下：陳菲儀編寫第1章至第10章并提供本書自帶案例，劉枝秀編寫第11章至第15章。感謝北京白鷺時代信息技術有限公司的劉晨光、段春雷、蘇魁和潘東為本書提供的技術支持，以及高能漫畫為本書提供隨書案例。

由于時間倉促及編者水平有限，書中疏漏之處在所難免，懇請廣大讀者批評和指正。

編 者

2017年8月

第1章 初識HTML5動畫 1
1.1 什么是HTML5動畫 1
1.2 HTML5動畫制作軟件選擇 3
第2章 DragonBones基礎 5
2.1 DragonBones Pro 的獲取和安裝 5
2.1.1 Windows平臺 5
2.1.2 Mac平臺 5
2.2 DragonBones界面介紹 8
2.3 DragonBones工作區布局修改 9
2.3.1 面板的�？亢头纸M 9
2.3.2 面板組大小的修改 12
第3章 創建簡單的幀動畫項目—
移動的小球 13
3.1 項目概述 13
3.2 新建項目 13
3.3 保存項目 15
3.4 動畫制作 16
3.4.1 導入圖片并添加到主場景 16
3.4.2 拖動主場景視圖 18
3.4.3 放大和縮小主場景視圖 19
3.4.4 移動圖片 20
3.4.5 創建關鍵幀 20
3.4.6 播放動畫 21
3.4.7 設置運動曲線 22
3.5 在瀏覽器中預覽動畫 24
第4章 幀動畫進階—游戲開場動畫 26
4.1 項目概述 26
4.2 新建并保存項目 26
4.3 準備工作 27
4.3.1 導入資源 27
4.3.2 拖拽資源到主場景 27
4.3.3 放置圖片 29
4.3.4 修改圖層層級 29
4.4 游戲開場動畫運動介紹 31
4.5 制作小山丘的動畫 32
4.5.1 批量添加關鍵幀 32
4.5.2 創建關鍵幀動畫 32
4.5.3 將運動曲線設置為線性 33
4.5.4 移動關鍵幀 35
4.6 制作小房子的動畫 35
4.7 制作柵欄的動畫 36
4.8 制作實例標題的動畫 37
4.8.1 動畫的時間安排 37
4.8.2 修改圖片旋轉軸點 37
4.8.3 創建關鍵幀動畫 39
4.8.4 將運動曲線設置為淡出 39
4.8.5 設置其他文字的關鍵幀動畫 40
第5章 創建簡單的骨骼動畫—小丑盒子 42
5.1 項目概述 42
5.2 新建并保存項目 42
5.3 骨架裝配 44
5.3.1 導入資源到舞臺 44
5.3.2 生成插槽 45
5.3.3 放置圖片 45
5.3.4 修改插槽層級 46
5.3.5 修改骨架名稱 47
5.3.6 創建小丑頭部的骨骼 48
5.3.7 隱藏插槽和骨骼 50
5.3.8 創建其他部分的骨骼 51
5.3.9 整理骨骼層級 52
5.4 動畫制作 52
5.4.1 切換到動畫制作模式 52
5.4.2 修改動畫剪輯的名字 53
5.4.3 移動及旋轉骨骼 53
5.4.4 創建關鍵幀 55
5.4.5 自動關鍵幀 55
5.4.6 縮放骨骼 56
5.4.7 完成其他關鍵姿勢 57
5.4.8 復制及粘貼關鍵幀 58
5.5 導出動畫數據 60
第6章 骨骼動畫進階—跑步的人 62
6.1 項目概述 62
6.2 骨架裝配 62
6.2.1 導入數據到項目 62
6.2.2 創建角色四肢的骨骼 65
6.2.3 創建身體和頭部的骨骼 67
6.2.4 整理骨骼層級 69
6.3 制作跑步動畫 69
6.3.1 跑步動作介紹 69
6.3.2 關鍵姿態的擺放 71
6.3.3 移動和縮放關鍵幀 75
6.4 制作跳躍動畫 77
6.4.1 添加動畫剪輯 77
6.4.2 跳躍動作介紹 77
6.4.3 關鍵姿勢的擺放 78
6.4.4 洋蔥皮功能 80
6.5 制作空閑動畫 82
6.5.1 空閑動作介紹 82
6.5.2 關鍵姿勢的擺放 82
6.5.3 讓角色眨眼 83
6.6 設置動畫剪輯播放次數和過渡時間 87
6.6.1 設置動畫剪輯播放次數 87
6.6.2 設置動畫剪輯過渡時間 87
6.7 在瀏覽器中預覽動畫并切換動作 88
第7章 創建網格變形動畫—跳跳羊 89
7.1 項目概述 89
7.2 從Photoshop中導出數據到
DragonBones 89
7.2.1 安裝PSD導出插件 89
7.2.2 使用PSD導出插件導出數據到
DragonBones 90
7.3 骨架裝配 95
7.4 網格裝配 96
7.4.1 創建網格 96
7.4.2 設置圖片邊線 99
7.4.3 添加網格頂點 101
7.5 動畫制作 105
7.5.1 跳跳羊動作介紹 105
7.5.2 設置主體的動作 106
7.5.3 設置腿部的動作 109
7.5.4 設置身體的網格變形動作 112
第8章 創建IK和蒙皮動畫—
懸掛著的小猴子 116
8.1 項目概述 116
8.2 導入數據到項目 116
8.3 創建骨架 117
8.4 創建蒙皮 119
8.4.1 創建網格 119
8.4.2 將網格綁定到骨骼 120
8.4.3 編輯骨骼權重 121
8.5 創建IK 125
8.6 動畫制作 129
8.6.1 小猴子招手動畫介紹 129
8.6.2 關鍵姿勢的擺放 129
8.6.3 延遲手部和腿部的動作 131
8.6.4 編輯運動曲線 133
第9章 元件的嵌套—草莓唇膏營銷廣告 135
9.1 項目概述 135
9.2 新建項目 135
9.3 草莓唇膏營銷廣告介紹 137
9.4 制作唇膏主體動畫 138
9.4.1 新建基本動畫元件 138
9.4.2 制作唇膏靜止狀態的動畫剪輯 139
9.4.3 制作唇膏閃光狀態的動畫剪輯 140
9.5 制作小兔子聞草莓動畫 141
9.5.1 骨架裝配 141
9.5.2 動畫制作 141
9.6 制作主舞臺動畫 145
9.6.1 資源導入及放置 145
9.6.2 制作唇膏細節及整體設計的
展示動畫 147
9.6.3 添加小兔子聞草莓的動畫 152
9.6.4 制作廣告宣傳語氣泡框動畫 154
9.6.5 制作唇膏流光閃爍動畫 155
第10章 創建動態漫畫 157
10.1 項目概述 157
10.2 導入數據 157
10.3 動態漫畫制作界面介紹 159
10.4 動態漫畫制作 159
10.4.1 動態漫畫交互介紹 159
10.4.2 更改背景顏色 160
10.4.3 為標題添加動畫特效 161
10.4.4 修改標題動畫順序及動畫組合 165
10.4.5 為漫畫內容添加動畫特效 169
第11章 播放一個DragonBones動作 176
11.1 項目概述 176
11.2 讀取DragonBones資源并解析到工廠 176
11.2.1 讀取資源 176
11.2.2 創建并將資源添加到骨骼動畫工廠 178
11.3 提取骨架并添加到舞臺 178
11.4 播放一個DragonBones動作 179
第12章 多人物動畫 182
12.1 項目概述 182
12.2 使用同一動畫工廠 182
12.2.1 將骨架加入動畫工廠 182
12.2.2 使用同一動畫工廠播放
不同角色動作 183
12.3 使用不同動畫工廠 185
第13章 應用場景案例 187
13.1 項目概述 187
13.2 動態換裝 187
13.2.1 替換圖片 187
13.2.2 替換子骨架 190
13.3 控制骨骼運動 191
13.4 控制動畫速度 194
13.4.1 調節世界時鐘 194
13.4.2 調節動畫速度 195
13.4.3 調節動作速度 196
13.5 動畫遮罩與動畫混合 196
13.5.1 動畫遮罩 197
13.5.2 動畫混合 198
13.6 動畫拷貝 200
第14章 骨骼動畫事件系統 202
14.1 項目概述 202
14.2 DragonBones系統事件介紹
與使用簡介 202
14.2.1 DragonBones事件實現機制 202
14.2.2 DragonBones系統事件使用方法 203
14.3 使用DragonBones用戶自定義事件 205
第15章 附錄 210
15.1 基本概念 210
15.1.1 骨架 210
15.1.2 骨骼 210
15.1.3 插槽 212
15.1.4 圖片 213
15.1.5 繼承 215
15.1.6 邊界框 215
15.1.7 元件及元件嵌套 217
15.2 主界面 219
15.3 工具欄 220
15.3.1 系統工具欄 220
15.3.2 主場景工具欄 221
15.3.3 顯示/可選/繼承工具 223
15.3.4 編輯模式切換工具 223
15.4 窗口 224
15.4.1 新建項目窗口 224
15.4.2 首選項 225
15.5 面板 226
15.5.1 “場景樹”面板 226
15.5.2 “變換”面板 227
15.5.3 “屬性”面板 227
15.5.4 “層級”面板 228
15.5.5 “資源”面板 229
15.5.6 “動畫”面板 230
15.5.7 “時間軸”面板 231
15.5.8 作品分享 235
15.6 右鍵菜單 236
15.7 高級功能 237
15.7.1 洋蔥皮 237
15.7.2 曲線編輯器 238
15.7.3 IK約束 241
15.7.4 網格 243
15.7.5 蒙皮權重 245
15.8 導入 249
15.8.1 導入 249
15.8.2 導入項目文件夾 249
15.8.3 導入zip包項目 250
15.8.4 導入dbswf格式矢量紋理集 251
15.8.5 導入集成數據PNG 252
15.8.6 導入Photoshop設計圖 252
15.8.7 導入Cocos或Spine的導出項目 255
15.8.8 命令行導入 256
15.9 導出 257
15.9.1 導出“動畫數據+紋理” 257
15.9.2 導出“圖片” 258
15.9.3 導出中的紋理集設置 259
15.10 快捷鍵 261
15.11 插件 261
15.11.1 插件管理 261
15.11.2 插件開發規范 264

1. 應用數學 [吳小寧]
2. 新時代勞動教育與實踐 [鞠向超]
3. 信息系統項目管理師真題及沖刺卷精析（適用機考） [主編 薛大龍]
4. 系統集成項目管理工程師真題及沖刺卷精析（適用機考） [主編 薛大龍 副主編 唐徽 劉]
5. Linux服務器構建與運維管理從基礎到實戰（基于openEuler） [阮曉龍 馮順磊 杜宇飛 劉明哲]
6. 網絡安全原理與應用（第三版） [戚文靜 劉學 李國文 王震]
7. 信息系統監理師章節習題與考點特訓（適用第2版考綱） [薛大龍]
8. 大學生創新創業實踐——經濟管理類 [許忠榮]
9. 思考的藝術：讓創新成為你的DNA（第二版） [楊璐璐 武 曉]
10. 走進東盟（慕課版） [主編　李太生　李瑩　黃詩雅]
11. Photoshop圖像處理與制作（第2版） [林龍健 李觀金 張倩文 黃龍泉]
12. 航空發動機試車 [主編　都昌兵　舒　毅]
13. 汽車評估學（第三版） [趙培全]
14. 大學計算機基礎實訓指導（Windows 10+WPS Office 2019） [吳志攀 王健海]
15. 高職英語語法教程 [主編 汪莉 高小兵 張學儀]
16. 系統集成項目管理工程師章節習題與考點特訓（配套第三版大綱） [薛大龍]
17. 青少年親子編程—趣學Python（全彩 微課版） [黃明游 著]
18. 英美文學導論 [晏玉屏]
19. Linux服務器配置與管理項目教程（微課版）（第2版） [主 編 宋麗娜 常麗媛 蔣一鋤]
20. 大學生勞動教育與實踐 [嚴光文 胡金朝 邊仕英]
21. 大學計算機基礎（第二版） [王家寧 張世龍]
22. 計算機應用基礎 [楊玉斌 戰祥德 孫豐偉]
23. 排球教程 [楊柳青 邱 峰 黃智譽]
24. 大學生創新創業實踐——數學類 [主編 吳天慶]
25. 信息技術（文科版） [主編 李佳 楊纓]
26. C語言程序設計 [魏琴 劉祖珉 趙仕波 肖陽春]
27. 新媒體電商：從技能學習到實踐應用 [郭曉花 孟柳樊]
28. 計算機應用基礎項目實訓教程 [楊玉斌 戰祥德 孫豐偉]
29. 計算機應用基礎（第四版） [王向慧 王志飛]
30. 計算機應用基礎實訓教程（第四版） [王向慧 張卓]