《HTML5動畫創作技術——DragonBones》是2017年中國水利水電出版社出版的圖書，作者是陳菲儀、劉枝秀。
基本介紹
- 書名：HTML5動畫創作技術——DragonBones
- 作者：陳菲儀，劉枝秀
- 類別：程式設計類圖書
- 出版社：中國水利水電出版社
- 出版時間：2017年12月
- 定價：¥45.00
- 開本：大16開
- 裝幀：平裝
- ISBN：9787517059356
編輯推薦,內容簡介,作者簡介,目錄,
編輯推薦
隨著HTML5動畫的風靡旋試恥，越來越多的教育機構和培訓機構開始在課堂中引入有關HTML5動畫的教學。然而，現在市面上大部分教材面向的讀者群體是開發者，主要內容是如何利用JavaScript腳本語言實現動畫效果。實際上，動畫師才是HTML5動畫真正的創作者，技術只是HTML5動畫的基石，HTML5動畫真正的靈魂來源於動畫師的創造力（即他們的設計能力和對運動規律的把握能力），而本書面向的主要讀者群體正是動畫師。
本書講授的軟體為DragonBones Pro 5.0，這是一款所見即所得的HTML5動畫製作軟體，它能讓動畫師擺脫掉代碼的約束，更專注於動畫效果的營造，而且準確便捷地將動畫轉換為HTML5動畫所需的代碼和資源，完美地銜接後續的編程環節。
本書採用案例的方式，循序漸進地帶領讀者認識DragonBones Pro的各項功能，在掌握軟體的同時潛移默化地學習HTML5動畫的創作思路。
內容簡介
本書是一本介紹DragonBones Pro基本功能及實際運用的書。DragonBones是一款當前較為流行的HTML5動畫製作軟體。本書通過大量案例（8個H5動畫製作案例和7個H5動畫開發案例），深入淺出地介紹了DragonBones的常見功能，讓零基礎的讀者能夠快速全面地掌握H5動畫的創作要點。全書共14章，分為兩個部分。第*個部分為HTML5動畫製作部分（1-10章），從第3章起，通過7個案例將記阿膠DragonBones的基本知識點融入到實踐操作中，讓讀者輕鬆掌握軟體操作的同時，對H5動畫的創作思路形成拔愉乎系統的認知。第二部分是HTML5動畫開發部分（11-14章），通過7個案例以點帶面地闡述了DragonBones 動畫數據與Egret引擎進行結合的要點。此外，本書*後還增加了附錄部分，系統詳盡射白紋地收錄了DragonBones的所有功能，讓讀者能夠迅速地查找到自己想要的功能。
本書覆蓋遊戲、廣告行銷動畫、動態漫畫三大H5動畫主流套用領域。可用作為普通高校動畫、遊戲、漫畫等相關專業的教材，也可作為H5動畫從業人員及初學者的參考書。
作者簡介
目錄
前言
第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 面板的停靠和分組 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
2.2 DragonBones界面介紹 8
2.3 DragonBones工作區布局修改 9
2.3.1 面板的停靠和分組 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
