編輯推薦
通過HTML5+JavaScript動畫基礎,你將進入Web編程創意的新時代。HTML5+JavaScript動畫基礎詳細介紹瞭如何使用HTML5的canvas元素來創建高級Web圖形和動態腳本動畫。它涵蓋瞭要完成各種動畫項目所必需掌握的所有技能——從遊戲到導航係統,從廣告到教育應用程序。
在HTML5+JavaScript動畫基礎中,作者Billy Lamberta首先清晰地介紹瞭所有相關的數學知識,然後引入瞭加速度、速度嚮量、緩動、彈動、碰撞檢測、動量守恒、3D、正嚮運動學和反嚮運動學等物理概念。他還幫你建立瞭一個工具集,你可以把這些工具融入自己編寫的任意動畫腳本中來創建動態效果。
在任何時候,你都能購理解隱藏在腳本動畫背後的概念,而且還可以創建各種各樣令人激動的動畫和遊戲。對於所有使用HTML5或從Flash轉到HTML5的Web開發人員來說,HTML5+JavaScript動畫基礎正是你們夢寐以求的,它可以引領你創建各種能夠在當前所有的瀏覽器和大多數移動設備(包括iPhone、iPad和Android設備)上運行的完全符閤標準的遊戲、應用程序、動畫。
內容簡介
《HTML5+JavaScript動畫基礎》包括瞭基礎知識、基礎動畫、高級動畫、3D動畫和其他技術5大部分,分彆介紹瞭動畫的基本概念、動畫的JavaScript基礎、動畫中的三角學、渲染技術、速度嚮量和加速度、邊界與摩擦力、用戶交互:移動物體、緩動與彈動、碰撞檢測、坐標鏇轉與斜麵反彈、撞球物理、粒子與萬有引力、正嚮運動學:讓事物行走、反嚮運動學:拖曳與伸齣、三維基礎、三維綫條與填充、背麵剔除與三維燈光、矩陣數學、秘訣與技巧等內容。
這些內容都是Web開發人員在深入如加速度、速度、緩衝、彈簧、碰撞檢測、動量守恒、3D以及正嚮和反嚮運動物理概念之前,需要知道的所有關於三角函數的知識。在閱讀本書的過程中,讀者不但可以掌握腳本動畫背後的概念,還可以創造齣各種形式的精彩動畫和遊戲。
《HTML5+JavaScript動畫基礎》麵嚮所有使用HTML5或從Flash轉過來的Web開發人員。
作者簡介
徐寜,軟件架構師,從2001年開始接觸.NET開發,於2007年7月獲得C#方嚮的微軟MVP。現任職於道富銀行技術中心,從事金融軟件架構設計的工作。在博客園(idior.cnblogs.com)曾發錶多篇技術文章並參與過多本技術書籍的翻譯,現關注於.NET企業應用與敏捷開發。你可以通過xuning.net@gmail.com與他聯係。
李強,軟件工程師,2008年畢業於西北大學軟件學院,現就職於道富銀行技術中心。開發瞭多個大型金融項目。愛好技術,喜歡摺騰,在WCF,WPF,ASP.NET MVC等多個領域都有較深入研究。你可以通過Email/MSN: Sparkli@hotmail.com與他聯係。
內頁插圖
精彩書評
HTML5+JavaScript是目前的移動應用開發技術。在HTML5的諸多新特性中,HTML5 Canvas是其中吸引人的特性之一。它由JavaScript腳本進行控製,可以動態地繪製齣各種2D圖形,甚至可以對圖像像素進行任意處理。
本書是麵嚮遊戲和娛樂應用開發的HTML5圖書,在書中我們將通過流行的Web前端開發語言JavaScript操縱Canvas來實現各種各樣的動畫效果,通過各種各樣的示例可以觸發你聯想到如何將它們組閤在一起以實現你的創意。
目錄
第一部分 JavaScript動畫基礎
第1章 動畫的基本概念
1.1 動畫
1.2 幀與運動
1.2.1 記錄幀
1.2.2 程序幀
1.3 動態動畫與靜態動畫
1.4 小結
第2章 動畫的JavaScript基礎
2.1 動畫基礎
2.2 HTML5簡介
2.2.1 對canvas的支持
2.2.2 性能
2.2.3 HTML5基本文檔
2.2.4 CSS樣式錶
2.2.5 額外的腳本
2.2.6 調試
2.3 用代碼實現動畫
2.3.1 動畫循環
2.3.2 使用requestAnimationFrame的動畫循環
2.4 JavaScript對象
2.4.1 基礎對象
2.4.2 創建一類新對象
2.4.3 原型
2.4.4 函數風格
2.5 用戶交互
2.5.1 事件與事件處理程序
2.5.2 監聽器與事件處理程序
2.5.3 鼠標事件
2.5.4 鼠標位置
2.5.5 觸摸事件
2.5.6 觸摸位置
2.5.7 鍵盤事件
2.5.8 鍵盤碼
2.6 小結
第3章 動畫中的三角學
3.1 三角學
3.2 角
3.2.1 弧度和角度
3.2.2 canvas坐標係
3.2.3 三角形的邊
3.2.4 三角函數
3.3 鏇轉
3.4 波
3.4.1 平滑的上下運動
3.4.2 綫性垂直運動
3.4.3 脈衝運動
3.4.4 使用兩個角的産生波
3.4.5 使用繪圖API産生的波
3.5 圓與橢圓
3.5.1 圓周運動
3.5.2 橢圓運動
3.6 勾股定律
3.6.1 兩點間距離
3.7 本章中的重要公式
3.7.1 三角學基礎函數
3.7.2 角度與弧度互轉
3.7.3 朝鼠標(或任意一點)鏇轉
3.7.4 創建波
3.7.5 創建圓形
3.7.6 創建橢圓形
3.7.7 獲取兩點間的距離
3.8 小結
第4章 渲染技術
4.1 canvas上的顔色
4.1.1 使用十六進製錶示顔色值
4.1.2 色彩閤成
4.1.3 提取三原色
4.1.4 透明度
4.1.5 與顔色相關的工具函數
4.2 繪圖API
4.3 canvas上下文
4.4 使用clearRect消除圖案
4.4.1 設置綫條的外觀
4.5 使用lineTo與moveTo繪製路徑
4.5.1 使用quadraticCurveTo繪製麯綫
4.5.2 創建多條麯綫
4.5.3 其他形式的麯綫
4.6 使用填充色創建圖形
4.6.1 創建漸變填充色
4.6.2 設置漸變色的顔色
4.7 加載並繪製圖片
4.7.1 加載圖片
4.7.2 使用圖片元素
4.7.3 使用視頻元素
4.8 操縱像素
4.8.1 獲取像素數據
4.8.2 繪製像素數據
4.9 本章中的重要公式
4.9.1 從十六進製轉換到十進製
4.9.2 從十進製轉換到十六進製
4.9.3 組閤三原色
4.9.4 提取三原色
4.9.5 繪製一條穿越某個點的麯綫
4.10 小結
第二部分 基本動畫
第5章 速度嚮量和加速度
5.1 速度嚮量
5.1.1 嚮量與速度嚮量
5.1.2 單軸上的速度嚮量
5.1.3 雙軸上的速度嚮量
5.1.4 角速度
5.1.5 嚮量加法
5.1.6 鼠標追隨者
5.1.7 速度嚮量擴展
5.2 加速度
5.2.1 單軸加速度
5.2.2 雙軸加速度
5.2.3 重力加速度
5.2.4 角加速度
5.2.5 宇宙飛船
5.2.6 飛船控製
5.3 本章中的重要公式
5.3.1 將角速度分解為x、y軸上的速度嚮量
5.3.2 將角加速度(作用域物體上的力)分解為x、y軸上的加速度
5.3.3 將加速度加入速度嚮量
5.3.4 將速度嚮量加入位置坐標
5.4 小結
第6章 邊界與摩擦力
6.1 環境邊界
6.1.1 設置邊界
6.1.2 移除物體
6.1.3 重置物體
6.1.4 屏幕環繞
6.1.5 反彈
6.2 摩擦力
6.2.1 摩擦力,正確方法
6.2.2 摩擦力,簡便方法
6.2.3 摩擦力應用
6.3 本章中的重要公式
6.3.1 移除越界物體
6.3.2 重置越界物體
6.3.3 越界物體的屏幕環繞
6.3.4 應用摩擦力(正確方法)
6.3.5 應用摩擦力(簡便方法)
6.4 小結
第7章 用戶交互:移動物體
7.1 按下及釋放物體
7.1.1 使用觸摸事件
7.2 拖曳對象
7.2.1 結閤運動代碼的拖曳
7.3 投擲
7.4 小結
第三部分 高級動畫
第8章 緩動與彈動
8.1 比例運動
8.2 緩動
8.2.1 簡單緩動
8.2.2 高級緩動
8.3 彈動
8.3.1 一維坐標上的彈動
8.3.2 二維坐標上的彈動
8.3.3 嚮移動的目標點彈動
8.3.4 彈簧在哪兒
8.3.5 鏈式彈動
8.3.6 多個目標點的彈動
8.3.7 目標偏移量
8.3.8 用彈簧連接多個物體
8.4 本章中的重要公式
8.4.1 簡單緩動,詳細版
8.4.2 簡單緩動,縮略版
8.4.3 簡單緩動,簡易版
8.4.4 簡單彈動,詳細版
8.4.5 簡單彈動,縮略版
8.4.6 簡單彈動,簡易版
8.4.7 有偏移量的彈動
8.5 小結
第9章 碰撞檢測
9.1 碰撞檢測的方法
9.2 基於幾何圖形的碰撞檢測
9.2.1 兩個物體間的碰撞檢測
9.2.2 物體和點的碰撞檢測
9.2.3 幾何圖形碰撞檢測法的總結
9.3 基於距離的碰撞檢測
9.3.1 基於距離的簡單碰撞檢測
9.3.2 彈性碰撞
9.4 多物體的碰撞檢測策略
9.4.1 基礎的多物體碰撞檢測
9.4.2 多物體彈動
9.5 本章中的重要公式
9.5.1 基於距離的碰撞檢測
9.5.2 多物體碰撞檢測
9.6 小結
第10章 坐標鏇轉與斜麵反彈
10.1 簡單坐標鏇轉
10.2 高級坐標鏇轉
10.2.1 鏇轉單個物體
10.2.2 鏇轉多個物體
10.3 斜麵反彈
10.3.1 執行鏇轉
10.3.2 優化代碼
10.3.3 實現動態效果
10.3.4 修復“不從邊緣落下”的問題
10.3.5 修復“綫下”問題
10.3.6 從多個斜麵反彈
10.4 本章中的重要公式
10.4.1 坐標鏇轉
10.4.2 反嚮坐標鏇轉
10.5 小結
第11章 撞球物理
11.1 質量
11.2 動量
11.3 動量守恒
11.3.1 單軸上的動量守恒
11.3.2 雙軸上的動量守恒
11.4 本章中的重要公式
11.4.1 動量守恒的數學錶示
11.4.2 動量守恒的JavaScript代碼
11.5 小結
第12章 粒子與萬有引力
12.1 粒子
12.2 萬有引力
12.2.1 萬有引力
12.2.2 碰撞檢測及反應
12.2.3 軌道運動
12.3 彈力
12.3.1 萬有引力VS彈力
12.3.2 彈力節點花園
12.3.3 相連的節點
12.3.4 有質量的節點
12.4 本章中的重要公式
12.4.1 基本引力
12.4.2 引力公式的JavaScript實現
12.5 小結
第13章 正嚮運動學:讓物體行走
13.1 介紹正嚮和反嚮運動學
13.2 正嚮運動學編程入門
13.2.1 移動一個節段
13.2.2 移動兩個節段
13.3 過程自動化
13.3.1 建立一個自然行走周期
13.3.2 動態調整
13.4 讓它真實地行走
13.4.1 給它一些空間
13.4.2 加入重力
13.4.3 處理碰撞
13.4.4 處理反作用力
13.4.5 屏幕環繞,重復
13.5 小結
第14章 反嚮運動學:拖曳與伸齣
14.1 伸齣和拖曳單個節段
14.1.1 伸齣單個節段
14.1.2 拖曳單個節段
14.2 拖曳多個節段
14.2.1 拖曳兩個節段
14.2.2 拖曳更多節段
14.3 伸齣多個節段
14.3.1 伸嚮鼠標位置
14.3.2 伸嚮一個物體
14.3.3 加入一些交互
14.4 使用標準反嚮運動學方法
14.4.1 介紹餘弦定理
14.4.2 編程實現餘弦定理
14.5 本章中的重要公式
14.5.1 餘弦定理
14.5.2 JavaScript中的餘弦定理
14.6 小結
第四部分 3D動畫
第15章 三維基礎
15.1 第三維度與透視圖
15.1.1 z軸
15.1.2 透視圖
15.2 速度與加速度
15.3 反彈
15.3.1 單物體反彈
15.3.2 多物體反彈
15.3.3 Z排序
15.4 重力
15.5 屏幕環繞
15.6 緩動與彈動
15.6.1 緩動
15.6.2 彈動
15.7 坐標鏇轉
15.8 碰撞檢測
15.9 本章中的重要公式
15.9.1 基本透視圖
15.9.2 Z排序
15.9.3 坐標鏇轉
15.9.4 三維距離計算
15.10 小結
第16章 三維綫條與填充
16.1 創建點和綫
16.2 創建圖形
16.3 創建三維填充
16.3.1 使用三角形
16.4 三維實體建模
16.4.1 建模鏇轉的立方體
16.4.2 建模其他形狀
16.5 移動三維實體
16.6 小結
第17章 背麵剔除與三維燈光
17.1 背麵剔除
17.2 增強的深度排序
17.3 三維燈光
17.4 小結
第五部分 其他技巧
第18章 矩陣數學
18.1 矩陣基礎
18.2 矩陣運算
18.2.1 矩陣加法
18.2.2 矩陣乘法
18.3 canvas變換
18.4 小結
第19章 秘訣與技巧
19.1 布朗(隨機)運動
19.2 隨機分布
19.2.1 正方形分布
19.2.2 圓形分布
19.2.3 偏嚮分布
19.2.4 基於碰撞的分布
19.3 基於定時器和基於時間的動畫
19.3.1 基於定時器的動畫
19.3.2 基於時間的動畫
19.4 等質量物體之間的碰撞
19.5 集成聲音
19.6 小結
附錄A 常用公式
A.1 第3章
A.1.1 三角學基礎函數
A.1.2 角度與弧度互轉
A.1.3 朝鼠標指針(或任意一點)鏇轉
A.1.4 創建波
A.1.5 創建圓形
A.1.6 創建橢圓形
A.1.7 獲取兩點間的距離
A.2 第4章
A.2.1 從十六進製轉換到十進製
A.2.2 從十進製轉換到十六進製
A.2.3 組閤三原色
A.2.4 提取三原色
A.2.5 繪製一條穿越某個點的麯綫
A.3 第5章
A.3.1 將角速度分解為x、y軸上的速度嚮量
A.3.2 將角加速度(作用於物體上的力)分解為x、y軸上的加速度
A.3.3 將加速度加入速度嚮量
A.3.4 將速度嚮量加入位置坐標
A.4 第6章
A.4.1 移除越界物體
A.4.2 重置越界物體
A.4.3 屏幕環繞越界物體
A.4.4 應用摩擦力(正確方法)
A.4.5 應用摩擦力(簡便方法)
A.5 第8章
A.5.1 簡單緩動,詳細版
A.5.2 簡單緩動,縮略版
A.5.3 簡單緩動,簡易版
A.5.4 簡單彈動,詳細版
A.5.5 簡單彈動,縮略版
A.5.6 簡單彈動,簡易版
A.5.7 有偏移量的彈動
A.6 第9章
A.6.1 基於距離的碰撞檢測
A.6.2 多物體碰撞檢測
A.7 第10章
A.7.1 坐標鏇轉
A.7.2 反嚮坐標鏇轉
A.8 第11章
A.8.1 動量守恒的數學錶示
A.8.2 動量守恒的JavaScript代碼
A.9 第12章
A.9.1 基本引力
A.9.2 引力公式的JavaScript實現
A.10 第14章
A.10.1 餘弦定理
A.10.2 JavaScript中的餘弦定理
A.11 第15章
A.11.1 基本透視圖
A.11.2 Z排序
A.11.3 坐標鏇轉
A.11.4 三維距離計算
前言/序言
《網頁互動魔法:CSS3與JavaScript精通實戰》 洞悉網頁生命力的奧秘,點燃視覺錶現力的全新篇章 在數字浪潮席捲的今日,網頁早已超越瞭單純的信息載體,它化身為充滿活力、觸動人心的互動空間。當用戶輕觸屏幕,當鼠標在界麵上舞動,網頁便如同擁有瞭生命,以流暢的動畫、靈動的交互迴饋著他們的每一次指令。而這一切的魔法,正是由網頁前端技術精心編織而成。《網頁互動魔法:CSS3與JavaScript精通實戰》正是這樣一本,將帶你深度探索網頁動效與交互的奧秘,讓你掌握從靜態畫布到動態藝術的蛻變之道。 本書並非簡單羅列API或枯燥的語法講解,而是以實戰為導嚮,以解決真實開發場景中的痛點為目標,為你構建一套係統而深入的網頁互動技能體係。我們將從CSS3強大的動畫與過渡屬性入手,帶你領略如何用最簡潔的代碼創造齣令人驚艷的視覺效果。隨後,我們將深入JavaScript的世界,學習如何運用其強大的邏輯能力,賦予網頁以生命,使其能夠響應用戶的每一次操作,呈現齣豐富多樣的交互邏輯。 CSS3動畫與過渡:勾勒視覺之美的靈動畫筆 在Web開發領域,CSS3的齣現無疑是一場革命。它以前所未有的方式,讓開發者能夠以聲明式的方式控製元素的視覺呈現,尤其是其在動畫和過渡方麵的能力,更是極大地解放瞭開發者的創造力。本書將帶領你循序漸進地掌握CSS3動畫的核心要素: 過渡 (Transitions): 學習如何讓元素的屬性變化在一段時間內平滑發生,例如鼠標懸停時按鈕顔色的漸變,或者元素齣現時的淡入效果。我們將深入理解`transition-property`、`transition-duration`、`transition-timing-function`以及`transition-delay`等關鍵屬性,並學習如何利用它們組閤齣各種自然流暢的視覺反饋。 關鍵幀動畫 (Keyframe Animations): 當需求更加復雜的動畫序列時,關鍵幀動畫便是你的不二之選。本書將詳細講解`@keyframes`規則的使用,讓你能夠定義動畫的起始、中間和結束狀態,並通過百分比或`from`/`to`關鍵字精確控製動畫的每一個階段。你將學會如何創建諸如彈跳、鏇轉、縮放、路徑動畫等,並理解`animation-name`、`animation-duration`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode`以及`animation-play-state`等屬性的強大功能。 3D變換與空間感: 現代網頁設計越來越注重空間的營造,CSS3的`transform`屬性提供瞭強大的3D變換能力。我們將探索`translate3d`、`rotate3d`、`scale3d`以及`perspective`等屬性,讓你能夠創建齣具有深度和空間感的動畫效果,使網頁體驗更加沉浸。 動畫的性能優化: 優異的動畫效果離不開流暢的性能。本書會探討如何通過利用硬件加速、避免重排重繪等技術,優化CSS3動畫的性能,確保在各種設備上都能呈現齣平滑如絲的動畫體驗。 JavaScript交互:賦予網頁智慧與生命 如果說CSS3是網頁的畫筆,那麼JavaScript便是網頁的靈魂。它賦予瞭網頁響應用戶、處理邏輯、動態更新內容的能力,讓靜態的頁麵瞬間鮮活起來。本書將係統性地引導你掌握JavaScript在網頁交互中的核心應用: DOM操作的精髓: Document Object Model (DOM) 是JavaScript與網頁結構進行交互的橋梁。我們將深入學習如何使用JavaScript選取、創建、修改和刪除DOM元素,以及如何動態地改變元素的樣式和屬性。理解事件委托、節點遍曆等高級技巧,將幫助你寫齣更高效、更優雅的DOM操作代碼。 事件驅動的編程模型: 網頁交互的核心在於事件。本書將全麵講解各種常見的用戶事件,如`click`、`mouseover`、`keydown`、`submit`、`scroll`等,以及如何使用`addEventListener`注冊和移除事件監聽器。你將學會如何根據用戶的行為,觸發相應的JavaScript函數,實現諸如彈齣窗口、導航菜單展開、錶單驗證等功能。 異步編程與AJAX: 現代網頁需要能夠與服務器進行實時通信,而無需刷新整個頁麵。本書將深入講解AJAX (Asynchronous JavaScript and XML) 技術,學習如何使用`XMLHttpRequest`對象或更現代的`fetch` API,實現數據的異步加載和更新。你將掌握如何處理服務器響應,更新頁麵內容,從而創建齣動態、響應式的Web應用。 Web APIs的強大功能: JavaScript提供瞭豐富的Web APIs,它們賦予瞭網頁處理更復雜任務的能力。我們將探索諸如定時器 (`setTimeout`、`setInterval`)、本地存儲 (`localStorage`、`sessionStorage`)、瀏覽器信息獲取以及更高級的Canvas API進行自定義圖形繪製等。 麵嚮對象與函數式編程思想在交互中的應用: 為瞭編寫更易於維護和擴展的代碼,我們將引入麵嚮對象和函數式編程的思想。學習如何組織代碼結構,利用對象和函數來封裝邏輯,提高代碼的可重用性和可讀性。 實戰項目驅動: 本書最大的特色在於其強大的實戰性。我們不會停留在理論層麵,而是會通過一係列精心設計的項目,將所學知識融會貫通。從簡單的圖片輪播、下拉菜單,到復雜的拖拽排序、無縫滾動的列錶,再到響應式的數據可視化圖錶,每一個項目都將引導你親手實現,讓你在實踐中鞏固技能,解決實際開發中遇到的問題。 本書的獨特價值: 循序漸進,由淺入深: 無論你是初學者,還是希望深入提升的開發者,本書都將為你提供一條清晰的學習路徑。從基礎概念到高級技巧,內容由易到難,層層遞進,確保你能夠紮實掌握每一項技能。 代碼示例豐富,易於理解: 書中的每一個知識點都配有清晰、可運行的代碼示例,讓你能夠直觀地看到效果,並方便地進行復製、修改和實踐。 注重實戰,解決痛點: 本書始終圍繞“實戰”展開,力求為你解決在實際Web開發中遇到的各種動畫與交互難題。通過完成書中的項目,你將積纍寶貴的實戰經驗。 緊跟技術潮流: 本書內容涵蓋瞭CSS3和JavaScript最新的特性和最佳實踐,幫助你站在技術前沿。 培養解決問題的能力: 我們鼓勵讀者在學習過程中積極思考,動手實踐,並提供解決問題的思路和方法,培養獨立解決復雜問題的能力。 誰適閤閱讀本書: 前端開發新手: 希望係統學習網頁動畫和交互技術,為日後深入Web開發打下堅實基礎的開發者。 有一定基礎的前端開發者: 希望鞏固和提升CSS3動畫與JavaScript交互技能,學習更高級的技巧和優化方法的開發者。 UI/UX設計師: 希望理解前端實現原理,能夠更有效地與開發團隊溝通,將設計理念轉化為精美網頁的創意人士。 對網頁特效和互動感興趣的愛好者: 渴望掌握製作炫酷網頁技術,提升個人項目或作品吸引力的技術愛好者。 翻開《網頁互動魔法:CSS3與JavaScript精通實戰》,你將不僅僅是學習代碼,更是解鎖網頁的無限潛能,用你的雙手創造齣引人入勝、令人難忘的數字體驗。讓每一個點擊、每一次滑動,都成為用戶與網頁之間充滿驚喜的互動。