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。我深知，掌握一門技術，光靠死記硬背是不夠的，更重要的是理解其背後的原理和實際應用場景。因此，我非常期望這本書能夠具備以下特質：首先，它應該有清晰的邏輯結構，從概念入手，逐步深入；其次，它應該提供豐富的實踐案例，讓讀者能夠在模仿中學習，在實踐中成長；再次，它應該具有一定的前瞻性，能夠介紹一些最新的技術趨勢和最佳實踐，幫助讀者跟上行業發展的步伐。我特彆希望這本書能夠幫助我理解DragonBones在不同項目中的應用，例如遊戲開發、交互式廣告、或者動態的網頁UI設計。如果書中能夠包含一些性能優化、資源管理方麵的建議，那就再好不過瞭。總而言之，我希望這本書能成為我從一名普通的開發者，蛻變為一名能夠創造齣令人驚嘆的HTML5動畫的專業人士的有力助手。

評分☆☆☆☆☆

我一直對那些在網頁上生動有趣的動畫深感著迷，它們總能讓冰冷的界麵瞬間充滿活力。當我在書店看到《HTML5動畫創作技術 DragonBones》這本書時，我的第一反應就是：“這正是我需要的！”。我對HTML5的熟悉程度尚可，但對於如何將其與動畫創作結閤，尤其是使用DragonBones這樣專業的工具，我始終覺得有些摸不著頭腦。這本書的書名直接點明瞭主題，讓我對內容有瞭清晰的預期。我希望它能夠提供一個完整、係統的學習路徑，從最基礎的HTML5動畫概念講起，逐步深入到DragonBones的強大功能。我想象著書中會有大量的圖文並茂的實例，一步步地演示如何創建、綁定、動畫化角色，以及如何將其輸齣並集成到網頁中。我特彆期待能夠學到一些實用的技巧，比如如何製作循環動畫、如何實現交互式動畫，甚至是如何優化動畫的性能，以確保在各種設備上的流暢播放。這本書能否讓我徹底擺脫“隻會做靜態內容”的窘境，成為一名能夠為網頁注入靈魂的動畫創作者，是我最看重的一點。

評分☆☆☆☆☆

坦白說，我對“HTML5動畫創作技術 DragonBones”這個書名最初的感受是，它似乎是一本非常技術導嚮的書籍，充滿瞭各種代碼和指令。但我作為一個對動畫藝術本身也頗為熱愛的學習者，我內心深處更希望看到的是如何將創意和技術完美融閤。所以我非常期待這本書能夠超越純粹的技術教程，提供一些關於動畫敘事、角色塑造，甚至是風格化的指導。比如，如何利用DragonBones的骨骼係統來創造齣具有獨特個性的角色？如何設計能夠吸引人眼球的動作序列？這本書會不會分享一些在視覺錶現力上獨具匠心的案例，讓我們能夠學習到如何用更少的資源達到更好的視覺效果？我希望它不僅僅是教我“怎麼做”，更能引導我思考“為什麼這麼做”，以及“如何做得更好”。如果書中能穿插一些動畫設計大師的理念，或者對經典動畫作品進行技術解讀，那就更加錦上添花瞭。總而言之，我期待的不僅僅是一本技術手冊，更是一本能夠啓發我創作靈感的寶典。

評分☆☆☆☆☆

最近我一直在琢磨如何在項目中加入一些動態元素，讓內容不再那麼枯燥乏味。市麵上關於動畫製作的書籍很多，但大部分都側重於傳統的二維或三維軟件，對於網頁端的動畫創作，尤其是結閤HTML5這種開放標準的技術，我一直覺得缺乏係統性的指導。《HTML5動畫創作技術 DragonBones》這個書名，讓我眼前一亮。DragonBones這個名字本身就帶著一種技術和藝術結閤的韻味，而HTML5動畫創作技術則直擊我的痛點。我期望這本書能夠深入淺齣地講解如何在網頁環境中實現高質量的動畫效果，特彆是利用DragonBones這款工具。我希望它不僅僅是軟件操作的堆砌，更能包含一些動畫設計的原理和思路，比如如何讓角色動作更具錶現力，如何通過動畫來傳達情感。我理想中的這本書，應該會包含從基礎的概念介紹，到DragonBones軟件的詳細使用教程，再到如何將製作好的動畫嵌入到HTML5頁麵中，最後甚至能涉及一些性能優化和跨平颱兼容性的問題。畢竟，作為一名開發者，我不僅要會做，更要會優化，讓動畫在各種設備上都能流暢運行。

評分☆☆☆☆☆

這本書的書名一開始就吸引瞭我：“HTML5動畫創作技術 DragonBones”。聽起來就充滿瞭現代感和專業性，我一直對網頁端的交互式動畫充滿好奇，尤其是那種流暢、酷炫的效果，總覺得能在用戶體驗上帶來巨大的提升。DragonBones這個名字也很有力量感，讓我聯想到在數字世界裏揮灑創意，創造齣栩栩如生的角色和場景。我非常期待這本書能為我揭開HTML5動畫創作的神秘麵紗，讓我瞭解如何利用最新的技術，將我的動畫想法變成現實。想象一下，在瀏覽器裏就能看到媲美傳統動畫的精美作品，那該是多麼令人興奮的事情。我相信這本書會詳細講解如何運用HTML5的各種特性，結閤DragonBones這個強大的工具，一步步指導我完成從零基礎到精通的蛻變。無論是角色設計、骨骼綁定、動畫製作，還是最終的導齣和在網頁中的集成，我都希望能在這本書中找到詳盡的答案和實用的技巧。我特彆希望作者能夠分享一些實際項目的案例，讓我們能夠看到理論知識是如何轉化為實際應用的，這樣我纔能更好地理解和掌握這些技術。