HTML5动画创作技术 DragonBones pdf epub mobi txt 电子书 下载 2025

简体网页||繁体网页

☆☆☆☆☆

陈菲仪，刘枝秀 著

图书标签:

• HTML5
• 动画
• DragonBones
• 前端开发
• 动画制作
• 技术
• 教程
• Web动画
• 骨骼动画
• 图形编程

出版社： 中国水利水电出版社

ISBN：9787517059356

版次：1

商品编码：12258039

包装：平装

开本：16开

出版时间：2017-10-01

用纸：胶版纸

页数：276

字数：380000

编辑推荐

随着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动画从业人员及初学者的参考书。

作者简介

陈菲仪，女，1988年生，中国传媒大学动画学博士。其作品曾入选多个国内外动画节。曾参与《功夫兔与菜包狗》等多个动画项目的制作，在动画领域具备丰富的实践创作经验。现就职于广州美术学院，任动画专业教师。

内页插图

目录

前言

第1章初识HTML5动画 1

第2章 DragonBones基础 5

第3章创建简单的帧动画项目—移动的小球 13

第4章帧动画进阶—游戏开场动画 26

第5章创建简单的骨骼动画—小丑盒子 42

第6章骨骼动画进阶—跑步的人 62

第7章创建网格变形动画—跳跳羊 89

第8章创建IK和蒙皮动画—悬挂着的小猴子 116

第9章元件的嵌套—草莓唇膏营销广告 135

第10章创建动态漫画 157

第11章播放一个DragonBones动作 176

第12章多人物动画 182

第13章应用场景案例 187

第14章骨骼动画事件系统 202

第15章附录 210

《龙骨：HTML5动画的艺术与实践》 引言 在数字内容日益丰富的今天，动态视觉元素已成为吸引用户、传达信息、增强交互体验的关键。从精致的游戏角色到引人入胜的广告，再到流畅的界面动画，一切都离不开动画技术的支持。而HTML5动画，凭借其跨平台、高性能、低门槛等优势，正逐渐成为Web动画的主流解决方案。 本书《龙骨：HTML5动画的艺术与实践》并非一本关于特定软件工具的教程，而是深入探索HTML5动画创作的核心理念、技术原理与行业实践。我们将跳出工具的限制，回归动画的本质，带领读者构建一个坚实的知识体系，使之能够独立、高效、富有创意地进行HTML5动画的开发。本书旨在培养的是“动画创作者”而非“软件使用者”，让你掌握将想法转化为生动视觉的魔法。 第一部分：动画的基石——理论与原则 在开始任何创作之前，理解事物的内在规律至关重要。本部分将带领读者深入剖析动画的根本。 动画的语言：十二法则的再解读 挤压与拉伸 (Squash and Stretch)：这不仅仅是为了让物体看起来“软”或“硬”，更是为了赋予动画生命力，表现物体的质量、速度和弹性。我们将探讨如何在HTML5环境中，通过关键帧、缓动函数以及矢量图形的特性，精确控制挤压拉伸的程度，营造出恰当的物理反馈感。例如，一个弹跳的球，其下落时的拉伸和落地时的挤压，其幅度和持续时间都蕴含着关于材质和能量的信息。 预备动作 (Anticipation)：任何有力的动作之前，都会有一个相反方向的微小动作。它不仅为观众提供了动作的心理预期，也让接下来的主要动作更具冲击力。我们将分析如何在HTML5动画中，通过巧妙的位移、旋转或变形，在主动作之前加入恰到好处的预备动作，提升动画的表现力。 定格与延时 (Staging and Pose to Pose)：如何清晰地呈现动作，让观众在第一时间理解发生了什么？预备动作、关键帧之间的过渡以及恰当的姿态选择，都是“定格”艺术的体现。而“延时”则关乎节奏的把控，何时加速，何时减速，何时停顿，都直接影响动画的流畅度和情感传达。 跟随动作与叠化动作 (Follow Through and Overlapping Action)：这是让动画更自然、更具生命力的关键。即使主体动作已经完成，身体的其他部分或附着物仍会继续运动，直至最终停止。我们将探讨如何通过层叠的时间轴、父子节点的联动以及缓动函数的组合，来模拟这种真实的物理惯性。 慢入与慢出 (Slow In and Slow Out)：自然界中的物体很少会瞬间启动和停止。大部分运动都存在一个加速和减速的过程，即“缓动”。HTML5的动画API提供了丰富的缓动函数，但理解缓动的原理，并知道何时何地使用何种缓动，才能创作出丝滑流畅的动画。 弧线 (Arcs)：自然界的绝大多数运动都遵循弧线轨迹，而非直线。无论是抛物线，还是摆动的钟摆，都体现了弧线的优雅。我们将研究如何在HTML5中，通过数学函数或曲线工具，精确绘制出自然的弧线路径，让角色动作更加真实可信。 次要动作 (Secondary Action)：主动作之外的辅助性动作，它们可以增强主动作的表现力，也可以为角色增添个性和细节。例如，角色在奔跑时，手臂的摆动、头发的飘动、衣服的晃动，都是次要动作。 时机 (Timing)：这是动画的灵魂。动作的快慢、停顿的长短，决定了动画的节奏、情绪和信息传递的效率。我们将深入探讨时机对动画叙事和情感表达的影响，以及如何在HTML5中通过精确控制关键帧的时间间隔来实现理想的时机。 夸张 (Exaggeration)：在动画中，适度的夸张能够强化动作的表现力，使其更具趣味性和视觉冲击力。但夸张并非胡闹，而是建立在对真实规律理解基础上的变形与强化。 扎实的绘图 (Solid Drawing)：即使是简单的矢量动画，也要注重图形的结构、透视和体积感。良好的“扎实绘图”是动画可信的基础。 角色表演 (Appeal)：一个令人喜爱、易于理解的角色，能够更好地吸引观众。角色的设计、情绪的表达，都属于“角色表演”的范畴。 运动学与骨骼动画的数学原理 矢量图形的优势：理解HTML5 Canvas和SVG等矢量图形技术的优势，为何它们是制作可伸缩、高性能动画的理想选择。 坐标系与变换：深入理解二维坐标系，包括平移、旋转、缩放等基本变换操作，以及它们如何在动画中被应用。 关键帧插值：掌握不同类型的插值算法（线性、贝塞尔曲线等），以及它们如何决定两个关键帧之间的过渡效果，进而影响动画的流畅度和表现力。 骨骼绑定基础：理解骨骼系统的概念，包括骨骼的父子层级关系，以及如何通过骨骼来驱动模型进行变形。这部分将涉及一些基础的矩阵运算和四元数（虽然在高级应用中，但理解其概念对于理解复杂的旋转尤为重要）。 第二部分：HTML5动画的实践——技术与工具 在掌握了动画的理论基础后，本部分将带领读者将这些理论付诸实践。 HTML5动画的生态系统 Canvas API：深入解析Canvas API的强大功能，从绘制基本形状到复杂的路径描边、填充、渐变、阴影等，以及如何在Canvas上实现高效的动画渲染。 SVG动画：探索SVG作为一种声明式动画格式的优势，以及如何利用SMIL（Synchronized Multimedia Integration Language）或JavaScript来控制SVG元素的动画。 WebGL与3D动画：简要介绍WebGL如何将3D动画带入Web浏览器，以及它在游戏和复杂可视化场景中的应用。 Web Animations API：理解这个旨在统一浏览器动画API的标准，如何提供更强大、更灵活的动画控制能力。 构建可控的动画引擎 时间轴管理：设计与实现一个灵活的时间轴系统，能够管理多个动画轨道，控制它们的播放、暂停、循环以及相互之间的同步。 缓动函数库：构建一套丰富的缓动函数库，提供各种预设的缓动效果，并允许用户自定义曲线，以满足不同场景的需求。 事件系统：设计一个强大的事件系统，允许动画在特定时间点触发回调函数，例如动画开始、结束、循环、帧更新等，为交互式动画打下基础。 状态管理：如何有效地管理动画的状态，例如播放状态、速度、当前播放进度等，并确保其在不同组件之间的一致性。 动画的优化与性能 渲染效率：分析Canvas和SVG在不同场景下的性能特点，学习如何通过优化绘制顺序、减少重绘区域、使用离屏Canvas等技术，提升动画的渲染效率。 内存管理：在长时间运行的动画中，如何避免内存泄漏，合理管理资源，保持应用的流畅运行。 帧率的控制：理解帧率对动画流畅度的影响，并学习如何根据设备性能动态调整动画帧率。 动画压缩与分发：探讨如何优化动画资源（如矢量图、动画数据），以及如何将其高效地分发给用户。 第三部分：角色动画的艺术与流程 本部分将专注于角色动画这一动画创作中最具挑战性也最具魅力的领域。 角色设计与准备 人体工程学基础：理解骨骼结构、关节运动范围以及重力对身体姿态的影响，为角色动画打下坚实基础。 角色拆分与绑定：讲解如何将一个角色模型按照骨骼结构进行合理拆分，为动画制作做好准备。 IK与FK的权衡：深入理解正向动力学 (FK) 和逆向动力学 (IK) 的原理，以及它们各自的优缺点，并学会在不同场景下选择最合适的控制方式。 动作分解与关键帧构建 周期性动作的分解：以行走、奔跑等周期性动作为例，详细解析其动作分解的过程，包括关键帧的选取、姿态的绘制以及中间帧的过渡。 非周期性动作的设计：如何为角色的情绪表达、技能释放等非周期性动作设计出富有表现力的姿态和流畅的过渡。 表演与情感传达：通过角色的面部表情、肢体语言、眼神交流等，将情感和性格注入到动画中。 流程与协作 动画制作流程：从概念设计、故事板、角色绑定、动作创建到后期合成，梳理完整的动画制作流程。 团队协作工具：了解一些协作工具和流程，如何实现设计师、动画师、程序员之间的有效沟通与协作。 第四部分：高级技术与行业应用 本部分将触及更深层次的技术，并探讨HTML5动画在各个行业的实际应用。 物理引擎的集成 模拟真实物理：如何将2D物理引擎（如Box2D.js）集成到HTML5动画中，实现真实的碰撞、重力、弹性等物理效果，让动画更具真实感。 粒子系统：探索如何使用粒子系统创建爆炸、烟雾、火焰、魔法效果等，增强视觉表现力。 程序化动画 基于算法的动画生成：学习如何通过算法生成复杂的、非预设的动画，例如使用噪声函数生成随机的抖动效果，或通过数学模型生成动态的抽象图形。 响应式动画：设计能够根据用户输入、设备尺寸或数据变化而动态调整的动画，提升应用的交互性和个性化体验。 行业应用案例解析 游戏开发：解析HTML5动画在网页游戏、小游戏中的应用，包括角色动画、UI动画、特效表现等。 交互式广告与营销：研究如何利用HTML5动画制作引人入胜的广告，吸引用户点击，提升转化率。 数据可视化：探讨如何使用动画来生动地展示数据，让复杂的数据信息更易于理解和记忆。 教育与科普：分析HTML5动画在教育内容制作中的作用，如何通过生动的动画解释抽象概念。 用户界面 (UI) 与用户体验 (UX)：讲解如何运用动画来优化用户界面，提升用户体验，例如加载动画、过渡动画、反馈动画等。 结语 《龙骨：HTML5动画的艺术与实践》的目标是为你打开一扇通往HTML5动画创作世界的大门。我们相信，掌握了动画的本质原理，并辅以对相关技术的深刻理解，你将能够跳出任何单一工具的束缚，成为一名真正的动画创作者。无论你是初学者，还是有一定基础的开发者，本书都将为你提供坚实的理论指导和实践方法，助你在HTML5动画的创作之路上，如龙骨般坚实，似龙腾般自由。愿本书能激发你的创造力，让你在数字画布上挥洒自如，创作出令人惊叹的视觉作品。

评分☆☆☆☆☆

我一直对那些在网页上生动有趣的动画深感着迷，它们总能让冰冷的界面瞬间充满活力。当我在书店看到《HTML5动画创作技术 DragonBones》这本书时，我的第一反应就是：“这正是我需要的！”。我对HTML5的熟悉程度尚可，但对于如何将其与动画创作结合，尤其是使用DragonBones这样专业的工具，我始终觉得有些摸不着头脑。这本书的书名直接点明了主题，让我对内容有了清晰的预期。我希望它能够提供一个完整、系统的学习路径，从最基础的HTML5动画概念讲起，逐步深入到DragonBones的强大功能。我想象着书中会有大量的图文并茂的实例，一步步地演示如何创建、绑定、动画化角色，以及如何将其输出并集成到网页中。我特别期待能够学到一些实用的技巧，比如如何制作循环动画、如何实现交互式动画，甚至是如何优化动画的性能，以确保在各种设备上的流畅播放。这本书能否让我彻底摆脱“只会做静态内容”的窘境，成为一名能够为网页注入灵魂的动画创作者，是我最看重的一点。

评分☆☆☆☆☆

这本书的书名一开始就吸引了我：“HTML5动画创作技术 DragonBones”。听起来就充满了现代感和专业性，我一直对网页端的交互式动画充满好奇，尤其是那种流畅、酷炫的效果，总觉得能在用户体验上带来巨大的提升。DragonBones这个名字也很有力量感，让我联想到在数字世界里挥洒创意，创造出栩栩如生的角色和场景。我非常期待这本书能为我揭开HTML5动画创作的神秘面纱，让我了解如何利用最新的技术，将我的动画想法变成现实。想象一下，在浏览器里就能看到媲美传统动画的精美作品，那该是多么令人兴奋的事情。我相信这本书会详细讲解如何运用HTML5的各种特性，结合DragonBones这个强大的工具，一步步指导我完成从零基础到精通的蜕变。无论是角色设计、骨骼绑定、动画制作，还是最终的导出和在网页中的集成，我都希望能在这本书中找到详尽的答案和实用的技巧。我特别希望作者能够分享一些实际项目的案例，让我们能够看到理论知识是如何转化为实际应用的，这样我才能更好地理解和掌握这些技术。

评分☆☆☆☆☆

在我看来，技术书籍的价值往往在于它能否真正解决读者的问题，并引领他们走向更高的境界。《HTML5动画创作技术 DragonBones》这个书名，无疑给我留下了深刻的印象。它不仅涵盖了时下热门的HTML5技术，还点出了一个强大的动画创作工具DragonBones。我深知，掌握一门技术，光靠死记硬背是不够的，更重要的是理解其背后的原理和实际应用场景。因此，我非常期望这本书能够具备以下特质：首先，它应该有清晰的逻辑结构，从概念入手，逐步深入；其次，它应该提供丰富的实践案例，让读者能够在模仿中学习，在实践中成长；再次，它应该具有一定的前瞻性，能够介绍一些最新的技术趋势和最佳实践，帮助读者跟上行业发展的步伐。我特别希望这本书能够帮助我理解DragonBones在不同项目中的应用，例如游戏开发、交互式广告、或者动态的网页UI设计。如果书中能够包含一些性能优化、资源管理方面的建议，那就再好不过了。总而言之，我希望这本书能成为我从一名普通的开发者，蜕变为一名能够创造出令人惊叹的HTML5动画的专业人士的有力助手。

评分☆☆☆☆☆

最近我一直在琢磨如何在项目中加入一些动态元素，让内容不再那么枯燥乏味。市面上关于动画制作的书籍很多，但大部分都侧重于传统的二维或三维软件，对于网页端的动画创作，尤其是结合HTML5这种开放标准的技术，我一直觉得缺乏系统性的指导。《HTML5动画创作技术 DragonBones》这个书名，让我眼前一亮。DragonBones这个名字本身就带着一种技术和艺术结合的韵味，而HTML5动画创作技术则直击我的痛点。我期望这本书能够深入浅出地讲解如何在网页环境中实现高质量的动画效果，特别是利用DragonBones这款工具。我希望它不仅仅是软件操作的堆砌，更能包含一些动画设计的原理和思路，比如如何让角色动作更具表现力，如何通过动画来传达情感。我理想中的这本书，应该会包含从基础的概念介绍，到DragonBones软件的详细使用教程，再到如何将制作好的动画嵌入到HTML5页面中，最后甚至能涉及一些性能优化和跨平台兼容性的问题。毕竟，作为一名开发者，我不仅要会做，更要会优化，让动画在各种设备上都能流畅运行。

评分☆☆☆☆☆

坦白说，我对“HTML5动画创作技术 DragonBones”这个书名最初的感受是，它似乎是一本非常技术导向的书籍，充满了各种代码和指令。但我作为一个对动画艺术本身也颇为热爱的学习者，我内心深处更希望看到的是如何将创意和技术完美融合。所以我非常期待这本书能够超越纯粹的技术教程，提供一些关于动画叙事、角色塑造，甚至是风格化的指导。比如，如何利用DragonBones的骨骼系统来创造出具有独特个性的角色？如何设计能够吸引人眼球的动作序列？这本书会不会分享一些在视觉表现力上独具匠心的案例，让我们能够学习到如何用更少的资源达到更好的视觉效果？我希望它不仅仅是教我“怎么做”，更能引导我思考“为什么这么做”，以及“如何做得更好”。如果书中能穿插一些动画设计大师的理念，或者对经典动画作品进行技术解读，那就更加锦上添花了。总而言之，我期待的不仅仅是一本技术手册，更是一本能够启发我创作灵感的宝典。