本書采用案例的方式，循序漸進(jìn)地帶領(lǐng)讀者認(rèn)識(shí)DragonBones Pro的各項(xiàng)功能。讀者可以在掌握軟件操作的同時(shí)，潛移默化地學(xué)習(xí)H5動(dòng)畫的創(chuàng)作思路。

本書覆蓋游戲、廣告營(yíng)銷動(dòng)畫、動(dòng)態(tài)漫畫三大H5動(dòng)畫主流應(yīng)用領(lǐng)域，可作為普通高校動(dòng)畫、游戲、漫畫等相關(guān)專業(yè)的教材，也可作為H5動(dòng)畫從業(yè)人員及初學(xué)者的參考書。

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

隨著移動(dòng)端平臺(tái)的興起，業(yè)界亟需一種更具兼容性、更加開放的富媒體動(dòng)畫形式來取代舊有的Flash動(dòng)畫。在這種情況下，HTML5動(dòng)畫便應(yīng)運(yùn)而生了。相較于此前的互聯(lián)網(wǎng)動(dòng)畫格式，HTML5動(dòng)畫具備更好的移動(dòng)端兼容性和互動(dòng)性，可以說HTML5動(dòng)畫是未來互聯(lián)網(wǎng)動(dòng)畫的發(fā)展趨勢(shì)。

隨著HTML5動(dòng)畫的風(fēng)靡，越來越多的教育機(jī)構(gòu)和培訓(xùn)機(jī)構(gòu)開始在課堂中引入有關(guān)HTML5動(dòng)畫的教學(xué)。然而，現(xiàn)在市面上大部分教材面向的讀者群體是開發(fā)者，主要內(nèi)容是如何利用JavaScript腳本語(yǔ)言實(shí)現(xiàn)動(dòng)畫效果。實(shí)際上，動(dòng)畫師才是HTML5動(dòng)畫真正的創(chuàng)作者，技術(shù)只是HTML5動(dòng)畫的基石，HTML5動(dòng)畫真正的靈魂來源于動(dòng)畫師的創(chuàng)造力（即他們的設(shè)計(jì)能力和對(duì)運(yùn)動(dòng)規(guī)律的把握能力），而本書面向的主要讀者群體正是動(dòng)畫師。

本書講授的軟件為DragonBones Pro 5.0，這是一款所見即所得的HTML5動(dòng)畫制作軟件，它能讓動(dòng)畫師擺脫掉代碼的約束，更專注于動(dòng)畫效果的營(yíng)造，而且準(zhǔn)確便捷地將動(dòng)畫轉(zhuǎn)換為HTML5動(dòng)畫所需的代碼和資源，完美地銜接后續(xù)的編程環(huán)節(jié)。

本書采用案例的方式，循序漸進(jìn)地帶領(lǐng)讀者認(rèn)識(shí)DragonBones Pro的各項(xiàng)功能，在掌握軟件的同時(shí)潛移默化地學(xué)習(xí)HTML5動(dòng)畫的創(chuàng)作思路。

本書分為三個(gè)部分：第一部分為HTML5動(dòng)畫制作部分（第1章至第10章）；第二部分為HTML5動(dòng)畫開發(fā)部分（第11章至第14章）；第三部分為附錄（第15章）。

本書面向的讀者群如下：

（1）HTML5動(dòng)畫制作部分。

 具備一定美術(shù)基礎(chǔ)及動(dòng)畫基礎(chǔ)的人。

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

 熱愛游戲、HTML5廣告和動(dòng)態(tài)漫畫制作的人。

（2）HTML5動(dòng)畫開發(fā)部分。

 具備一定JavaScript基礎(chǔ)的人。

 熱愛游戲、HTML5廣告和動(dòng)態(tài)漫畫制作的人。

如果你是游戲、廣告、動(dòng)態(tài)漫畫團(tuán)隊(duì)中的設(shè)計(jì)師，閱讀本書可幫助你了解并掌握HTML5動(dòng)畫的制作方法，讓你制作HTML5動(dòng)畫的時(shí)候更加自由，并使你與團(tuán)隊(duì)成員的工作銜接變得更有效率；如果你是團(tuán)隊(duì)中的開發(fā)者，閱讀本書可幫助你了解HTML5動(dòng)畫的制作思路并掌握開發(fā)過程中使用和優(yōu)化HTML5動(dòng)畫的方法；如果你是獨(dú)立的游戲、廣告或動(dòng)態(tài)漫畫創(chuàng)作者，閱讀本書可幫助你更簡(jiǎn)單且更有效率地創(chuàng)作高質(zhì)量的作品。

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

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

由于時(shí)間倉(cāng)促及編者水平有限，書中疏漏之處在所難免，懇請(qǐng)廣大讀者批評(píng)和指正。

編 者

2017年8月

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

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