第一部分JavaScript動畫基礎
第1章 動畫的基本概念 2
1.1 動畫 3
1.2 幀與運動 3
1.2.1 記錄幀 4
1.2.2 程序幀 5
1.3 動態動畫與靜態動畫 5
1.4 小結 6
第2章 動畫的JavaScript基礎 7
2.1 動畫基礎 7
2.2 HTML5簡介 8
2.2.1 對canvas的支持 8
2.2.2 性能 9
2.2.3 HTML5基本文檔 9
2.2.4 CSS樣式錶 11
2.2.5 額外的腳本 12
2.2.6 調試 12
2.3 用代碼實現動畫 13
2.3.1 動畫循環 13
2.3.2 使用requestAnimationFrame的動畫循環 16
2.4 JavaScript對象 17
2.4.1 基礎對象 18
2.4.2 創建一類新對象 18
2.4.3 原型 19
2.4.4 函數風格 19
2.5 用戶交互 20
2.5.1 事件與事件處理程序 20
2.5.2 監聽器與事件處理程序 20
2.5.3 鼠標事件 22
2.5.4 鼠標位置 24
2.5.5 觸摸事件 25
2.5.6 觸摸位置 26
2.5.7 鍵盤事件 27
2.5.8 鍵盤碼 28
2.6 小結 30
第3章 動畫中的三角學 31
3.1 三角學 32
3.2 角 32
3.2.1 弧度和角度 32
3.2.2 canvas坐標係 33
3.2.3 三角形的邊 35
3.2.4 三角函數 35
3.3 鏇轉 39
3.4 波 42
3.4.1 平滑的上下運動 43
3.4.2 綫性垂直運動 45
3.4.3 脈衝運動 46
3.4.4 使用兩個角的産生波 47
3.4.5 使用繪圖API産生的波 48
3.5 圓與橢圓 49
3.5.1 圓周運動 49
3.5.2 橢圓運動 51
3.6 勾股定律 52
3.6.1 兩點間距離 52
3.7 本章中的重要公式 55
3.7.1 三角學基礎函數 55
3.7.2 角度與弧度互轉 55
3.7.3 朝鼠標（或任意一點）鏇轉 55
3.7.4 創建波 56
3.7.5 創建圓形 56
3.7.6 創建橢圓形 56
3.7.7 獲取兩點間的距離 56
3.8 小結 57
第4章 渲染技術 58
4.1 canvas上的顔色 58
4.1.1 使用十六進製錶示顔色值 59
4.1.2 色彩閤成 60
4.1.3 提取三原色 61
4.1.4 透明度 62
4.1.5 與顔色相關的工具函數 63
4.2 繪圖API 64
4.3 canvas上下文 65
4.4 使用clearRect消除圖案 65
4.4.1 設置綫條的外觀 66
4.5 使用lineTo與moveTo繪製路徑 66
4.5.1 使用quadraticCurveTo繪製麯綫 68
4.5.2 創建多條麯綫 70
4.5.3 其他形式的麯綫 74
4.6 使用填充色創建圖形 74
4.6.1 創建漸變填充色 75
4.6.2 設置漸變色的顔色 76
4.7 加載並繪製圖片 77
4.7.1 加載圖片 77
4.7.2 使用圖片元素 78
4.7.3 使用視頻元素 79
4.8 操縱像素 81
4.8.1 獲取像素數據 81
4.8.2 繪製像素數據 82
4.9 本章中的重要公式 86
4.9.1 從十六進製轉換到十進製 86
4.9.2 從十進製轉換到十六進製 86
4.9.3 組閤三原色 86
4.9.4 提取三原色 86
4.9.5 繪製一條穿越某個點的麯綫 87
4.10 小結 87
第二部分基本動畫
第5章 速度嚮量和加速度 90
5.1 速度嚮量 90
5.1.1 嚮量與速度嚮量 91
5.1.2 單軸上的速度嚮量 91
5.1.3 雙軸上的速度嚮量 94
5.1.4 角速度 94
5.1.5 嚮量加法 96
5.1.6 鼠標追隨者 97
5.1.7 速度嚮量擴展 98
5.2 加速度 100
5.2.1 單軸加速度 100
5.2.2 雙軸加速度 102
5.2.3 重力加速度 104
5.2.4 角加速度 105
5.2.5 宇宙飛船 107
5.2.6 飛船控製 108
5.3 本章中的重要公式 111
5.3.1 將角速度分解為x、y軸上的速度嚮量 111
5.3.2 將角加速度（作用域物體上的力）分解為x、y軸上的加速度 111
5.3.3 將加速度加入速度嚮量 111
5.3.4 將速度嚮量加入位置坐標 111
5.4 小結 111
第6章 邊界與摩擦力 112
6.1 環境邊界 113
6.1.1 設置邊界 113
6.1.2 移除物體 114
6.1.3 重置物體 117
6.1.4 屏幕環繞 119
6.1.5 反彈 121
6.2 摩擦力 124
6.2.1 摩擦力，正確方法 125
6.2.2 摩擦力，簡便方法 126
6.2.3 摩擦力應用 127
6.3 本章中的重要公式 128
6.3.1 移除越界物體 128
6.3.2 重置越界物體 129
6.3.3 越界物體的屏幕環繞 129
6.3.4 應用摩擦力（正確方法） 129
6.3.5 應用摩擦力（簡便方法） 129
6.4 小結 129
第7章 用戶交互：移動物體 130
7.1 按下及釋放物體 130
7.1.1 使用觸摸事件 133
7.2 拖曳對象 135
7.2.1 結閤運動代碼的拖曳 136
7.3 投擲 139
7.4 小結 142
第三部分高級動畫
第8章 緩動與彈動 144
8.1 比例運動 144
8.2 緩動 145
8.2.1 簡單緩動 145
8.2.2 高級緩動 153
8.3 彈動 153
8.3.1 一維坐標上的彈動 154
8.3.2 二維坐標上的彈動 156
8.3.3 嚮移動的目標點彈動 157
8.3.4 彈簧在哪兒 158
8.3.5 鏈式彈動 159
8.3.6 多個目標點的彈動 161
8.3.7 目標偏移量 163
8.3.8 用彈簧連接多個物體 165
8.4 本章中的重要公式 170
8.4.1 簡單緩動，詳細版 170
8.4.2 簡單緩動，縮略版 170
8.4.3 簡單緩動，簡易版 170
8.4.4 簡單彈動，詳細版 170
8.4.5 簡單彈動，縮略版 171
8.4.6 簡單彈動，簡易版 171
8.4.7 有偏移量的彈動 171
8.5 小結 171
第9章 碰撞檢測 172
9.1 碰撞檢測的方法 172
9.2 基於幾何圖形的碰撞檢測 173
9.2.1 兩個物體間的碰撞檢測 173
9.2.2 物體和點的碰撞檢測 177
9.2.3 幾何圖形碰撞檢測法的總結 179
9.3 基於距離的碰撞檢測 179
9.3.1 基於距離的簡單碰撞檢測 180
9.3.2 彈性碰撞 182
9.4 多物體的碰撞檢測策略 184
9.4.1 基礎的多物體碰撞檢測 184
9.4.2 多物體彈動 186
9.5 本章中的重要公式 189
9.5.1 基於距離的碰撞檢測 189
9.5.2 多物體碰撞檢測 189
9.6 小結 189
第10章 坐標鏇轉與斜麵反彈 190
10.1 簡單坐標鏇轉 190
10.2 高級坐標鏇轉 192
10.2.1 鏇轉單個物體 193
10.2.2 鏇轉多個物體 194
10.3 斜麵反彈 196
10.3.1 執行鏇轉 197
10.3.2 優化代碼 201
10.3.3 實現動態效果 202
10.3.4 修復“不從邊緣落下”的問題 202
10.3.5 修復“綫下”問題 204
10.3.6 從多個斜麵反彈 205
10.4 本章中的重要公式 208
10.4.1 坐標鏇轉 208
10.4.2 反嚮坐標鏇轉 208
10.5 小結 208
第11章 撞球物理 209
11.1 質量 209
11.2 動量 210
11.3 動量守恒 210
11.3.1 單軸上的動量守恒 212
11.3.2 雙軸上的動量守恒 216
11.4 本章中的重要公式 231
11.4.1 動量守恒的數學錶示 231
11.4.2 動量守恒的JavaScript代碼 231
11.5 小結 231
第12章 粒子與萬有引力 232
12.1 粒子 232
12.2 萬有引力 233
12.2.1 萬有引力 234
12.2.2 碰撞檢測及反應 236
12.2.3 軌道運動 237
12.3 彈力 238
12.3.1 萬有引力VS彈力 238
12.3.2 彈力節點花園 238
12.3.3 相連的節點 241
12.3.4 有質量的節點 242
12.4 本章中的重要公式 244
12.4.1 基本引力 244
12.4.2 引力公式的JavaScript實現 244
12.5 小結 244
第13章 正嚮運動學：讓物體行走 245
13.1 介紹正嚮和反嚮運動學 245
13.2 正嚮運動學編程入門 246
13.2.1 移動一個節段 246
13.2.2 移動兩個節段 251
13.3 過程自動化 253
13.3.1 建立一個自然行走周期 254
13.3.2 動態調整 257
13.4 讓它真實地行走 260
13.4.1 給它一些空間 260
13.4.2 加入重力 260
13.4.3 處理碰撞 261
13.4.4 處理反作用力 262
13.4.5 屏幕環繞，重復 264
13.5 小結 267
第14章 反嚮運動學：拖曳與伸齣 268
14.1 伸齣和拖曳單個節段 268
14.1.1 伸齣單個節段 269
14.1.2 拖曳單個節段 270
14.2 拖曳多個節段 270
14.2.1 拖曳兩個節段 271
14.2.2 拖曳更多節段 272
14.3 伸齣多個節段 274
14.3.1 伸嚮鼠標位置 274
14.3.2 伸嚮一個物體 279
14.3.3 加入一些交互 280
14.4 使用標準反嚮運動學方法 281
14.4.1 介紹餘弦定理 281
14.4.2 編程實現餘弦定理 283
14.5 本章中的重要公式 285
14.5.1 餘弦定理 285
14.5.2 JavaScript中的餘弦定理 285
14.6 小結 285
第四部分3D動畫
第15章 三維基礎 288
15.1 第三維度與透視圖 289
15.1.1 z軸 289
15.1.2 透視圖 290
15.2 速度與加速度 293
15.3 反彈 295
15.3.1 單物體反彈 295
15.3.2 多物體反彈 297
15.3.3 Z排序 300
15.4 重力 301
15.5 屏幕環繞 304
15.6 緩動與彈動 311
15.6.1 緩動 311
15.6.2 彈動 312
15.7 坐標鏇轉 314
15.8 碰撞檢測 319
15.9 本章中的重要公式 321
15.9.1 基本透視圖 321
15.9.2 Z排序 321
15.9.3 坐標鏇轉 322
15.9.4 三維距離計算 322
15.10 小結 322
第16章 三維綫條與填充 323
16.1 創建點和綫 323
16.2 創建圖形 328
16.3 創建三維填充 332
16.3.1 使用三角形 332
16.4 三維實體建模 337
16.4.1 建模鏇轉的立方體 337
16.4.2 建模其他形狀 339
16.5 移動三維實體 343
16.6 小結 344
第17章 背麵剔除與三維燈光 345
17.1 背麵剔除 346
17.2 增強的深度排序 348
17.3 三維燈光 349
17.4 小結 356
第五部分其他技巧
第18章 矩陣數學 358
18.1 矩陣基礎 358
18.2 矩陣運算 359
18.2.1 矩陣加法 359
18.2.2 矩陣乘法 360
18.3 canvas變換 363
18.4 小結 366
第19章 秘訣與技巧 367
19.1 布朗（隨機）運動 367
19.2 隨機分布 370
19.2.1 正方形分布 370
19.2.2 圓形分布 372
19.2.3 偏嚮分布 374
19.2.4 基於碰撞的分布 376
19.3 基於定時器和基於時間的動畫 378
19.3.1 基於定時器的動畫 378
19.3.2 基於時間的動畫 379
19.4 等質量物體之間的碰撞 381
19.5 集成聲音 382
19.6 小結 385
附錄A 常用公式 386
A.1 第3章 386
A.1.1 三角學基礎函數 386
A.1.2 角度與弧度互轉 386
A.1.3 朝鼠標指針（或任意一點）鏇轉 386
A.1.4 創建波 386
A.1.5 創建圓形 387
A.1.6 創建橢圓形 387
A.1.7 獲取兩點間的距離 387
A.2 第4章 387
A.2.1 從十六進製轉換到十進製 387
A.2.2 從十進製轉換到十六進製 387
A.2.3 組閤三原色 387
A.2.4 提取三原色 388
A.2.5 繪製一條穿越某個點的麯綫 388
A.3 第5章 388
A.3.1 將角速度分解為x、y軸上的速度嚮量 388
A.3.2 將角加速度（作用於物體上的力）分解為x、y軸上的加速度 388
A.3.3 將加速度加入速度嚮量 388
A.3.4 將速度嚮量加入位置坐標 388
A.4 第6章 388
A.4.1 移除越界物體 388
A.4.2 重置越界物體 389
A.4.3 屏幕環繞越界物體 389
A.4.4 應用摩擦力（正確方法） 389
A.4.5 應用摩擦力（簡便方法） 389
A.5 第8章 389
A.5.1 簡單緩動，詳細版 389
A.5.2 簡單緩動，縮略版 390
A.5.3 簡單緩動，簡易版 390
A.5.4 簡單彈動，詳細版 390
A.5.5 簡單彈動，縮略版 390
A.5.6 簡單彈動，簡易版 390
A.5.7 有偏移量的彈動 390
A.6 第9章 391
A.6.1 基於距離的碰撞檢測 391
A.6.2 多物體碰撞檢測 391
A.7 第10章 391
A.7.1 坐標鏇轉 391
A.7.2 反嚮坐標鏇轉 391
A.8 第11章 391
A.8.1 動量守恒的數學錶示 391
A.8.2 動量守恒的JavaScript代碼 392
A.9 第12章 392
A.9.1 基本引力 392
A.9.2 引力公式的JavaScript實現 392
A.10 第14章 392
A.10.1 餘弦定理 392
A.10.2 JavaScript中的餘弦定理 392
A.11 第15章 393
A.11.1 基本透視圖 393
A.11.2 Z排序 393
A.11.3 坐標鏇轉 393
A.11.4 三維距離計算 393
· · · · · · (收起)