HTML5动画创作技术—DragonBones
简介
本书特色
前言
章节列表
精彩阅读
下载资源
相关图书
本书是一本介绍DragonBones Pro基本功能及实际运用的书。DragonBones是一款当前较为流行的HTML5动画制作软件。本书通过大量案例（8个HTML5动画制作案例和7个HTML5动画开发案例），深入浅出地介绍了DragonBones的常见功能，让零基础的读者能够快速全面地掌握HTML5动画的创作要点。
全书共15章，分为三个部分：第一部分为HTML5动画制作部分（第1章至第10章），从第3章起，通过8个案例将DragonBones的基本知识点融入到实践操作中，让读者轻松掌握软件操作的同时，对HTML5动画的创作思路形成系统的认知；第二部分是HTML5动画开发部分（第11章至第14章），通过7个案例以点带面地阐述了DragonBones 动画数据与Egret引擎进行结合的要点；第三部分为附录部分（第15章），系统详尽地收录了DragonBones的所有功能，让读者能够迅速地查找到自己想要的功能。
本书覆盖游戏、广告营销动画、动态漫画三大HTML5动画主流应用领域，可作为普通高校动画、游戏、漫画等相关专业的教材，也可作为HTML5动画从业人员及初学者的参考书。
本书采用案例的方式，循序渐进地带领读者认识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.wsbookshow.com网站下载案例素材和案例源文件，通过查看案例源文件来检验自己的案例掌握程度。
本书由陈菲仪和刘枝秀编写，具体分工如下：陈菲仪编写第1章至第10章并提供本书自带案例，刘枝秀编写第11章至第15章。感谢北京白鹭时代信息技术有限公司的刘晨光、段春雷、苏魁和潘东为本书提供的技术支持，以及高能漫画为本书提供随书案例。
由于时间仓促及编者水平有限，书中疏漏之处在所难免，恳请广大读者批评和指正。
编 者
2017年8月
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
- 机械制图 [许淑珍 于利民]
- 微积分（经管类）导学篇（下册） [王海棠 曹海军 周玲丽]
- 大学生创新创业基础 [主编 姜国权 姜福佳]
- 农产品云仓模式研究—以北京农产品流通物流供应链重构为例 [武晓钊 王成林 王春娟 等著]
- 信息技术（微课版） [王云 徐江鸿 李清霞 罗学锋 ]
- 管理基础与实务 [主编 王凤基 颜汉军]
- 高等数学导学篇（下册） [主编 李文婧 胡雷 尹金生]
- 高等数学导学篇（上册） [主编 李文婧 胡雷 尹金生]
- 高等数学（下册） [主编 李爱芹 胡雷 尹金生]
- 高等数学（上册） [主编 李爱芹 胡雷 尹金生]
- 庭院风骨—树、灌、篱 [创意房主 著]
- Python语言程序设计教程 [郭其标 房宜汕]
- 微积分（经管类）教程篇（下册） [曹海军 王海棠 周玲丽]
- 微积分（经管类）教程篇（上册） [曹海军 王海棠 周玲丽]
- 微积分（经管类）导学篇（上册） [王海棠 曹海军 周玲丽]
- 网站前端技术案例教程（HTML+CSS+JavaScript）（第二版） [黄华升]
- 线性代数 [主编 史昱 陈凤欣]
- 电力电子技术课程学习及实验指导 [主编 陈荣]
- 成长对话：青春的榜样 [主编 施端银 黄武刚 应巨林]
- 人工智能应用基础 [主编 杨缨 李佳]
- 中华水文化（慕课版）（第二版） [毕雪燕 杨华轲 罗玲谊 等编著]
- 电路与电子技术Ⅱ——电路分析基础 [主编 陈晓 金哲]
- 飞机维修专业英语——飞机系统（第二版） [赵迎春]
- 英语大爆炸：跟趣味情景剧学口语（微课版） [秦然 编著]
- 机械工程制图任务跟踪训练 [主编 王瑞清 赵金考 周彦云 ]
- 机械工程制图 [主编 覃国萍 刘百顺 禹晨]
- 平面设计与制作项目化教程 [主编 李晨]
- 后期影像剪辑技术 [主编 郭建伟]
- 人工智能概论（第二版） [主编 任云晖 丁红 徐迎春 ]
- 信息时代美育之道 [主编 刘宏宇 黎娅]
