HTML5+JavaScript動(dòng)畫基礎(chǔ)

目　錄

第一部分 JavaScript動(dòng)畫基礎(chǔ)

第1章　動(dòng)畫的基本概念　2
1.1　動(dòng)畫　3
1.2　幀與運(yùn)動(dòng)　3
1.2.1　記錄幀　4
1.2.2　程序幀　5
1.3　動(dòng)態(tài)動(dòng)畫與靜態(tài)動(dòng)畫　5
1.4　小結(jié)　6

第2章　動(dòng)畫的JavaScript基礎(chǔ)　7
2.1　動(dòng)畫基礎(chǔ)　7
2.2　HTML5簡介　8
2.2.1　對(duì)canvas的支持　8
2.2.2　性能　9
2.2.3　HTML5基本文檔　9
2.2.4　CSS樣式表　11
2.2.5　額外的腳本　12
2.2.6　調(diào)試　12
2.3　用代碼實(shí)現(xiàn)動(dòng)畫　13
2.3.1　動(dòng)畫循環(huán)　13
2.3.2　使用requestAnimationFrame的動(dòng)畫循環(huán)　16
2.4　JavaScript對(duì)象　17
2.4.1　基礎(chǔ)對(duì)象　18
2.4.2　創(chuàng)建一類新對(duì)象　18
2.4.3　原型　19
2.4.4　函數(shù)風(fēng)格　19
2.5　用戶交互　20
2.5.1　事件與事件處理程序　20
2.5.2　監(jiān)聽器與事件處理程序　20
2.5.3　鼠標(biāo)事件　22
2.5.4　鼠標(biāo)位置　24
2.5.5　觸摸事件　25
2.5.6　觸摸位置　26
2.5.7　鍵盤事件　27
2.5.8　鍵盤碼　28
2.6　小結(jié)　30

第3章　動(dòng)畫中的三角學(xué)　31
3.1　三角學(xué)　32
3.2　角　32
3.2.1　弧度和角度　32
3.2.2　canvas坐標(biāo)系　33
3.2.3　三角形的邊　35
3.2.4　三角函數(shù)　35
3.3　旋轉(zhuǎn)　39
3.4　波　42
3.4.1　平滑的上下運(yùn)動(dòng)　43
3.4.2　線性垂直運(yùn)動(dòng)　45
3.4.3　脈沖運(yùn)動(dòng)　46
3.4.4　使用兩個(gè)角的產(chǎn)生波　47
3.4.5　使用繪圖API產(chǎn)生的波　48
3.5　圓與橢圓　49
3.5.1　圓周運(yùn)動(dòng)　49
3.5.2　橢圓運(yùn)動(dòng)　51
3.6　勾股定律　52
3.6.1　兩點(diǎn)間距離　52
3.7　本章中的重要公式　55
3.7.1　三角學(xué)基礎(chǔ)函數(shù)　55
3.7.2　角度與弧度互轉(zhuǎn)　55
3.7.3　朝鼠標(biāo)(或任意一點(diǎn))旋轉(zhuǎn)　55
3.7.4　創(chuàng)建波　56
3.7.5　創(chuàng)建圓形　56
3.7.6　創(chuàng)建橢圓形　56
3.7.7　獲取兩點(diǎn)間的距離　56
3.8　小結(jié)　57

第4章　渲染技術(shù)　58
4.1　canvas上的顏色　58
4.1.1　使用十六進(jìn)制表示顏色值　59
4.1.2　色彩合成　60
4.1.3　提取三原色　61
4.1.4　透明度　62
4.1.5　與顏色相關(guān)的工具函數(shù)　63
4.2　繪圖API　64
4.3　canvas上下文　65
4.4　使用clearRect消除圖案　65
4.4.1　設(shè)置線條的外觀　66
4.5　使用lineTo與moveTo繪制路徑　66
4.5.1　使用quadraticCurveTo繪制曲線　68
4.5.2　創(chuàng)建多條曲線　70
4.5.3　其他形式的曲線　74
4.6　使用填充色創(chuàng)建圖形　74
4.6.1　創(chuàng)建漸變填充色　75
4.6.2　設(shè)置漸變色的顏色　76
4.7　加載并繪制圖片　77
4.7.1　加載圖片　77
4.7.2　使用圖片元素　78
4.7.3　使用視頻元素　79
4.8　操縱像素　81
4.8.1　獲取像素?cái)?shù)據(jù)　81
4.8.2　繪制像素?cái)?shù)據(jù)　82
4.9　本章中的重要公式　86
4.9.1　從十六進(jìn)制轉(zhuǎn)換到十進(jìn)制　86
4.9.2　從十進(jìn)制轉(zhuǎn)換到十六進(jìn)制　86
4.9.3　組合三原色　86
4.9.4　提取三原色　86
4.9.5　繪制一條穿越某個(gè)點(diǎn)的曲線　87
4.10　小結(jié)　87

第二部分 基本動(dòng)畫

第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　鼠標(biāo)追隨者　97
5.1.7　速度向量擴(kuò)展　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　將速度向量加入位置坐標(biāo)　111
5.4　小結(jié)　111

第6章　邊界與摩擦力　112
6.1　環(huán)境邊界　113
6.1.1　設(shè)置邊界　113
6.1.2　移除物體　114
6.1.3　重置物體　117
6.1.4　屏幕環(huán)繞　119
6.1.5　反彈　121
6.2　摩擦力　124
6.2.1　摩擦力，正確方法　125
6.2.2　摩擦力，簡便方法　126
6.2.3　摩擦力應(yīng)用　127
6.3　本章中的重要公式　128
6.3.1　移除越界物體　128
6.3.2　重置越界物體　129
6.3.3　越界物體的屏幕環(huán)繞　129
6.3.4　應(yīng)用摩擦力(正確方法)　129
6.3.5　應(yīng)用摩擦力(簡便方法)　129
6.4　小結(jié)　129

第7章　用戶交互：移動(dòng)物體　130
7.1　按下及釋放物體　130
7.1.1　使用觸摸事件　133
7.2　拖曳對(duì)象　135
7.2.1　結(jié)合運(yùn)動(dòng)代碼的拖曳　136
7.3　投擲　139
7.4　小結(jié)　142

第三部分 高級(jí)動(dòng)畫

第8章　緩動(dòng)與彈動(dòng)　144
8.1　比例運(yùn)動(dòng)　144
8.2　緩動(dòng)　145
8.2.1　簡單緩動(dòng)　145
8.2.2　高級(jí)緩動(dòng)　153
8.3　彈動(dòng)　153
8.3.1　一維坐標(biāo)上的彈動(dòng)　154
8.3.2　二維坐標(biāo)上的彈動(dòng)　156
8.3.3　向移動(dòng)的目標(biāo)點(diǎn)彈動(dòng)　157
8.3.4　彈簧在哪兒　158
8.3.5　鏈?zhǔn)綇梽?dòng)　159
8.3.6　多個(gè)目標(biāo)點(diǎn)的彈動(dòng)　161
8.3.7　目標(biāo)偏移量　163
8.3.8　用彈簧連接多個(gè)物體　165
8.4　本章中的重要公式　170
8.4.1　簡單緩動(dòng)，詳細(xì)版　170
8.4.2　簡單緩動(dòng)，縮略版　170
8.4.3　簡單緩動(dòng)，簡易版　170
8.4.4　簡單彈動(dòng)，詳細(xì)版　170
8.4.5　簡單彈動(dòng)，縮略版　171
8.4.6　簡單彈動(dòng)，簡易版　171
8.4.7　有偏移量的彈動(dòng)　171
8.5　小結(jié)　171

第9章　碰撞檢測　172
9.1　碰撞檢測的方法　172
9.2　基于幾何圖形的碰撞檢測　173
9.2.1　兩個(gè)物體間的碰撞檢測　173
9.2.2　物體和點(diǎn)的碰撞檢測　177
9.2.3　幾何圖形碰撞檢測法的總結(jié)　179
9.3　基于距離的碰撞檢測　179
9.3.1　基于距離的簡單碰撞檢測　180
9.3.2　彈性碰撞　182
9.4　多物體的碰撞檢測策略　184
9.4.1　基礎(chǔ)的多物體碰撞檢測　184
9.4.2　多物體彈動(dòng)　186
9.5　本章中的重要公式　189
9.5.1　基于距離的碰撞檢測　189
9.5.2　多物體碰撞檢測　189
9.6　小結(jié)　189

第10章　坐標(biāo)旋轉(zhuǎn)與斜面反彈　190
10.1　簡單坐標(biāo)旋轉(zhuǎn)　190
10.2　高級(jí)坐標(biāo)旋轉(zhuǎn)　192
10.2.1　旋轉(zhuǎn)單個(gè)物體　193
10.2.2　旋轉(zhuǎn)多個(gè)物體　194
10.3　斜面反彈　196
10.3.1　執(zhí)行旋轉(zhuǎn)　197
10.3.2　優(yōu)化代碼　201
10.3.3　實(shí)現(xiàn)動(dòng)態(tài)效果　202
10.3.4　修復(fù)“不從邊緣落下”的問題　202
10.3.5　修復(fù)“線下”問題　204
10.3.6　從多個(gè)斜面反彈　205
10.4　本章中的重要公式　208
10.4.1　坐標(biāo)旋轉(zhuǎn)　208
10.4.2　反向坐標(biāo)旋轉(zhuǎn)　208
10.5　小結(jié)　208

第11章　撞球物理　209
11.1　質(zhì)量　209
11.2　動(dòng)量　210
11.3　動(dòng)量守恒　210
11.3.1　單軸上的動(dòng)量守恒　212
11.3.2　雙軸上的動(dòng)量守恒　216
11.4　本章中的重要公式　231
11.4.1　動(dòng)量守恒的數(shù)學(xué)表示　231
11.4.2　動(dòng)量守恒的JavaScript代碼　231
11.5　小結(jié)　231

第12章　粒子與萬有引力　232
12.1　粒子　232
12.2　萬有引力　233
12.2.1　萬有引力　234
12.2.2　碰撞檢測及反應(yīng)　236
12.2.3　軌道運(yùn)動(dòng)　237
12.3　彈力　238
12.3.1　萬有引力VS彈力　238
12.3.2　彈力節(jié)點(diǎn)花園　238
12.3.3　相連的節(jié)點(diǎn)　241
12.3.4　有質(zhì)量的節(jié)點(diǎn)　242
12.4　本章中的重要公式　244
12.4.1　基本引力　244
12.4.2　引力公式的JavaScript實(shí)現(xiàn)　244
12.5　小結(jié)　244

第13章　正向運(yùn)動(dòng)學(xué)：讓物體行走　245
13.1　介紹正向和反向運(yùn)動(dòng)學(xué)　245
13.2　正向運(yùn)動(dòng)學(xué)編程入門　246
13.2.1　移動(dòng)一個(gè)節(jié)段　246
13.2.2　移動(dòng)兩個(gè)節(jié)段　251
13.3　過程自動(dòng)化　253
13.3.1　建立一個(gè)自然行走周期　254
13.3.2　動(dòng)態(tài)調(diào)整　257
13.4　讓它真實(shí)地行走　260
13.4.1　給它一些空間　260
13.4.2　加入重力　260
13.4.3　處理碰撞　261
13.4.4　處理反作用力　262
13.4.5　屏幕環(huán)繞，重復(fù)　264
13.5　小結(jié)　267

第14章　反向運(yùn)動(dòng)學(xué)：拖曳與伸出　268
14.1　伸出和拖曳單個(gè)節(jié)段　268
14.1.1　伸出單個(gè)節(jié)段　269
14.1.2　拖曳單個(gè)節(jié)段　270
14.2　拖曳多個(gè)節(jié)段　270
14.2.1　拖曳兩個(gè)節(jié)段　271
14.2.2　拖曳更多節(jié)段　272
14.3　伸出多個(gè)節(jié)段　274
14.3.1　伸向鼠標(biāo)位置　274
14.3.2　伸向一個(gè)物體　279
14.3.3　加入一些交互　280
14.4　使用標(biāo)準(zhǔn)反向運(yùn)動(dòng)學(xué)方法　281
14.4.1　介紹余弦定理　281
14.4.2　編程實(shí)現(xiàn)余弦定理　283
14.5　本章中的重要公式　285
14.5.1　余弦定理　285
14.5.2　JavaScript中的余弦定理　285
14.6　小結(jié)　285

第四部分 3D動(dòng)畫

第15章　三維基礎(chǔ)　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　屏幕環(huán)繞　304
15.6　緩動(dòng)與彈動(dòng)　311
15.6.1　緩動(dòng)　311
15.6.2　彈動(dòng)　312
15.7　坐標(biāo)旋轉(zhuǎn)　314
15.8　碰撞檢測　319
15.9　本章中的重要公式　321
15.9.1　基本透視圖　321
15.9.2　Z排序　321
15.9.3　坐標(biāo)旋轉(zhuǎn)　322
15.9.4　三維距離計(jì)算　322
15.10　小結(jié)　322

第16章　三維線條與填充　323
16.1　創(chuàng)建點(diǎn)和線　323
16.2　創(chuàng)建圖形　328
16.3　創(chuàng)建三維填充　332
16.3.1　使用三角形　332
16.4　三維實(shí)體建?！?37
16.4.1　建模旋轉(zhuǎn)的立方體　337
16.4.2　建模其他形狀　339
16.5　移動(dòng)三維實(shí)體　343
16.6　小結(jié)　344

第17章　背面剔除與三維燈光　345
17.1　背面剔除　346
17.2　增強(qiáng)的深度排序　348
17.3　三維燈光　349
17.4　小結(jié)　356

第五部分 其他技巧

第18章　矩陣數(shù)學(xué)　358
18.1　矩陣基礎(chǔ)　358
18.2　矩陣運(yùn)算　359
18.2.1　矩陣加法　359
18.2.2　矩陣乘法　360
18.3　canvas變換　363
18.4　小結(jié)　366

第19章　秘訣與技巧　367
19.1　布朗(隨機(jī))運(yùn)動(dòng)　367
19.2　隨機(jī)分布　370
19.2.1　正方形分布　370
19.2.2　圓形分布　372
19.2.3　偏向分布　374
19.2.4　基于碰撞的分布　376
19.3　基于定時(shí)器和基于時(shí)間的動(dòng)畫　378
19.3.1　基于定時(shí)器的動(dòng)畫　378
19.3.2　基于時(shí)間的動(dòng)畫　379
19.4　等質(zhì)量物體之間的碰撞　381
19.5　集成聲音　382
19.6　小結(jié)　385

附錄A　常用公式　386
A.1　第3章　386
A.1.1　三角學(xué)基礎(chǔ)函數(shù)　386
A.1.2　角度與弧度互轉(zhuǎn)　386
A.1.3　朝鼠標(biāo)指針(或任意一點(diǎn))旋轉(zhuǎn)　386
A.1.4　創(chuàng)建波　386
A.1.5　創(chuàng)建圓形　387
A.1.6　創(chuàng)建橢圓形　387
A.1.7　獲取兩點(diǎn)間的距離　387
A.2　第4章　387
A.2.1　從十六進(jìn)制轉(zhuǎn)換到十進(jìn)制　387
A.2.2　從十進(jìn)制轉(zhuǎn)換到十六進(jìn)制　387
A.2.3　組合三原色　387
A.2.4　提取三原色　388
A.2.5　繪制一條穿越某個(gè)點(diǎn)的曲線　388
A.3　第5章　388
A.3.1　將角速度分解為x、y軸上的速度向量　388
A.3.2　將角加速度(作用于物體上的力)分解為x、y軸上的加速度　388
A.3.3　將加速度加入速度向量　388
A.3.4　將速度向量加入位置坐標(biāo)　388
A.4　第6章　388
A.4.1　移除越界物體　388
A.4.2　重置越界物體　389
A.4.3　屏幕環(huán)繞越界物體　389
A.4.4　應(yīng)用摩擦力(正確方法)　389
A.4.5　應(yīng)用摩擦力(簡便方法)　389
A.5　第8章　389
A.5.1　簡單緩動(dòng)，詳細(xì)版　389
A.5.2　簡單緩動(dòng)，縮略版　390
A.5.3　簡單緩動(dòng)，簡易版　390
A.5.4　簡單彈動(dòng)，詳細(xì)版　390
A.5.5　簡單彈動(dòng)，縮略版　390
A.5.6　簡單彈動(dòng)，簡易版　390
A.5.7　有偏移量的彈動(dòng)　390
A.6　第9章　391
A.6.1　基于距離的碰撞檢測　391
A.6.2　多物體碰撞檢測　391
A.7　第10章　391
A.7.1　坐標(biāo)旋轉(zhuǎn)　391
A.7.2　反向坐標(biāo)旋轉(zhuǎn)　391
A.8　第11章　391
A.8.1　動(dòng)量守恒的數(shù)學(xué)表示　391
A.8.2　動(dòng)量守恒的JavaScript代碼　392
A.9　第12章　392
A.9.1　基本引力　392
A.9.2　引力公式的JavaScript實(shí)現(xiàn)　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　坐標(biāo)旋轉(zhuǎn)　393
A.11.4　三維距離計(jì)算　393