HTML5+JavaScript動畫基礎(chǔ)
本文關(guān)鍵詞:HTML5+JavaScript動畫基礎(chǔ),由筆耕文化傳播整理發(fā)布。
作者簡介
徐寧,軟件架構(gòu)師,從2001年開始接觸.NET開發(fā),于2007年7月獲得C#方向的微軟MVP,F(xiàn)任職于道富銀行技術(shù)中心,從事金融軟件架構(gòu)設(shè)計的工作。在博客園(idior.cnblogs.com)曾發(fā)表多篇技術(shù)文章并參與過多本技術(shù)書籍的翻譯,現(xiàn)關(guān)注于.NET企業(yè)應(yīng)用與敏捷開發(fā)。你可以通過xuning.net@gmail.com與他聯(lián)系。李強,軟件工程師,2008年畢業(yè)于西北大學(xué)軟件學(xué)院,現(xiàn)就職于道富銀行技術(shù)中心。開發(fā)了多個大型金融項目。愛好技術(shù),喜歡折騰,在WCF,WPF,ASP.NET MVC等多個領(lǐng)域都有較深入研究。你可以通過Email/MSN: Sparkli@hotmail.com與他聯(lián)系。
書籍目錄
目 錄 第一部分 JavaScript動畫基礎(chǔ)第1章 動畫的基本概念 21.1 動畫 31.2 幀與運動 31.2.1 記錄幀 41.2.2 程序幀 51.3 動態(tài)動畫與靜態(tài)動畫 51.4 小結(jié) 6第2章 動畫的JavaScript基礎(chǔ) 72.1 動畫基礎(chǔ) 72.2 HTML5簡介 82.2.1 對canvas的支持 82.2.2 性能 92.2.3 HTML5基本文檔 92.2.4 CSS樣式表 112.2.5 額外的腳本 122.2.6 調(diào)試 122.3 用代碼實現(xiàn)動畫 132.3.1 動畫循環(huán) 132.3.2 使用requestAnimationFrame的動畫循環(huán) 162.4 JavaScript對象 172.4.1 基礎(chǔ)對象 182.4.2 創(chuàng)建一類新對象 182.4.3 原型 192.4.4 函數(shù)風(fēng)格 192.5 用戶交互 202.5.1 事件與事件處理程序 202.5.2 監(jiān)聽器與事件處理程序 202.5.3 鼠標(biāo)事件 222.5.4 鼠標(biāo)位置 242.5.5 觸摸事件 252.5.6 觸摸位置 262.5.7 鍵盤事件 272.5.8 鍵盤碼 282.6 小結(jié) 30第3章 動畫中的三角學(xué) 313.1 三角學(xué) 323.2 角 323.2.1 弧度和角度 323.2.2 canvas坐標(biāo)系 333.2.3 三角形的邊 353.2.4 三角函數(shù) 353.3 旋轉(zhuǎn) 393.4 波 423.4.1 平滑的上下運動 433.4.2 線性垂直運動 453.4.3 脈沖運動 463.4.4 使用兩個角的產(chǎn)生波 473.4.5 使用繪圖API產(chǎn)生的波 483.5 圓與橢圓 493.5.1 圓周運動 493.5.2 橢圓運動 513.6 勾股定律 523.6.1 兩點間距離 523.7 本章中的重要公式 553.7.1 三角學(xué)基礎(chǔ)函數(shù) 553.7.2 角度與弧度互轉(zhuǎn) 553.7.3 朝鼠標(biāo)(或任意一點)旋轉(zhuǎn) 553.7.4 創(chuàng)建波 563.7.5 創(chuàng)建圓形 563.7.6 創(chuàng)建橢圓形 563.7.7 獲取兩點間的距離 563.8 小結(jié) 57第4章 渲染技術(shù) 584.1 canvas上的顏色 584.1.1 使用十六進制表示顏色值 594.1.2 色彩合成 604.1.3 提取三原色 614.1.4 透明度 624.1.5 與顏色相關(guān)的工具函數(shù) 634.2 繪圖API 644.3 canvas上下文 654.4 使用clearRect消除圖案 654.4.1 設(shè)置線條的外觀 664.5 使用lineTo與moveTo繪制路徑 664.5.1 使用quadraticCurveTo繪制曲線 684.5.2 創(chuàng)建多條曲線 704.5.3 其他形式的曲線 744.6 使用填充色創(chuàng)建圖形 744.6.1 創(chuàng)建漸變填充色 754.6.2 設(shè)置漸變色的顏色 764.7 加載并繪制圖片 774.7.1 加載圖片 774.7.2 使用圖片元素 784.7.3 使用視頻元素 794.8 操縱像素 814.8.1 獲取像素數(shù)據(jù) 814.8.2 繪制像素數(shù)據(jù) 824.9 本章中的重要公式 864.9.1 從十六進制轉(zhuǎn)換到十進制 864.9.2 從十進制轉(zhuǎn)換到十六進制 864.9.3 組合三原色 864.9.4 提取三原色 864.9.5 繪制一條穿越某個點的曲線 874.10 小結(jié) 87第二部分 基本動畫第5章 速度向量和加速度 905.1 速度向量 905.1.1 向量與速度向量 915.1.2 單軸上的速度向量 915.1.3 雙軸上的速度向量 945.1.4 角速度 945.1.5 向量加法 965.1.6 鼠標(biāo)追隨者 975.1.7 速度向量擴展 985.2 加速度 1005.2.1 單軸加速度 1005.2.2 雙軸加速度 1025.2.3 重力加速度 1045.2.4 角加速度 1055.2.5 宇宙飛船 1075.2.6 飛船控制 1085.3 本章中的重要公式 1115.3.1 將角速度分解為x、y軸上的速度向量 1115.3.2 將角加速度(作用域物體上的力)分解為x、y軸上的加速度 1115.3.3 將加速度加入速度向量 1115.3.4 將速度向量加入位置坐標(biāo) 1115.4 小結(jié) 111第6章 邊界與摩擦力 1126.1 環(huán)境邊界 1136.1.1 設(shè)置邊界 1136.1.2 移除物體 1146.1.3 重置物體 1176.1.4 屏幕環(huán)繞 1196.1.5 反彈 1216.2 摩擦力 1246.2.1 摩擦力,正確方法 1256.2.2 摩擦力,簡便方法 1266.2.3 摩擦力應(yīng)用 1276.3 本章中的重要公式 1286.3.1 移除越界物體 1286.3.2 重置越界物體 1296.3.3 越界物體的屏幕環(huán)繞 1296.3.4 應(yīng)用摩擦力(正確方法) 1296.3.5 應(yīng)用摩擦力(簡便方法) 1296.4 小結(jié) 129第7章 用戶交互:移動物體 1307.1 按下及釋放物體 1307.1.1 使用觸摸事件 1337.2 拖曳對象 1357.2.1 結(jié)合運動代碼的拖曳 1367.3 投擲 1397.4 小結(jié) 142第三部分 高級動畫第8章 緩動與彈動 1448.1 比例運動 1448.2 緩動 1458.2.1 簡單緩動 1458.2.2 高級緩動 1538.3 彈動 1538.3.1 一維坐標(biāo)上的彈動 1548.3.2 二維坐標(biāo)上的彈動 1568.3.3 向移動的目標(biāo)點彈動 1578.3.4 彈簧在哪兒 1588.3.5 鏈?zhǔn)綇梽印?598.3.6 多個目標(biāo)點的彈動 1618.3.7 目標(biāo)偏移量 1638.3.8 用彈簧連接多個物體 1658.4 本章中的重要公式 1708.4.1 簡單緩動,詳細版 1708.4.2 簡單緩動,縮略版 1708.4.3 簡單緩動,簡易版 1708.4.4 簡單彈動,詳細版 1708.4.5 簡單彈動,縮略版 1718.4.6 簡單彈動,簡易版 1718.4.7 有偏移量的彈動 1718.5 小結(jié) 171第9章 碰撞檢測 1729.1 碰撞檢測的方法 1729.2 基于幾何圖形的碰撞檢測 1739.2.1 兩個物體間的碰撞檢測 1739.2.2 物體和點的碰撞檢測 1779.2.3 幾何圖形碰撞檢測法的總結(jié) 1799.3 基于距離的碰撞檢測 1799.3.1 基于距離的簡單碰撞檢測 1809.3.2 彈性碰撞 1829.4 多物體的碰撞檢測策略 1849.4.1 基礎(chǔ)的多物體碰撞檢測 1849.4.2 多物體彈動 1869.5 本章中的重要公式 1899.5.1 基于距離的碰撞檢測 1899.5.2 多物體碰撞檢測 1899.6 小結(jié) 189第10章 坐標(biāo)旋轉(zhuǎn)與斜面反彈 19010.1 簡單坐標(biāo)旋轉(zhuǎn) 19010.2 高級坐標(biāo)旋轉(zhuǎn) 19210.2.1 旋轉(zhuǎn)單個物體 19310.2.2 旋轉(zhuǎn)多個物體 19410.3 斜面反彈 19610.3.1 執(zhí)行旋轉(zhuǎn) 19710.3.2 優(yōu)化代碼 20110.3.3 實現(xiàn)動態(tài)效果 20210.3.4 修復(fù)“不從邊緣落下”的問題 20210.3.5 修復(fù)“線下”問題 20410.3.6 從多個斜面反彈 20510.4 本章中的重要公式 20810.4.1 坐標(biāo)旋轉(zhuǎn) 20810.4.2 反向坐標(biāo)旋轉(zhuǎn) 20810.5 小結(jié) 208第11章 撞球物理 20911.1 質(zhì)量 20911.2 動量 21011.3 動量守恒 21011.3.1 單軸上的動量守恒 21211.3.2 雙軸上的動量守恒 21611.4 本章中的重要公式 23111.4.1 動量守恒的數(shù)學(xué)表示 23111.4.2 動量守恒的JavaScript代碼 23111.5 小結(jié) 231第12章 粒子與萬有引力 23212.1 粒子 23212.2 萬有引力 23312.2.1 萬有引力 23412.2.2 碰撞檢測及反應(yīng) 23612.2.3 軌道運動 23712.3 彈力 23812.3.1 萬有引力VS彈力 23812.3.2 彈力節(jié)點花園 23812.3.3 相連的節(jié)點 24112.3.4 有質(zhì)量的節(jié)點 24212.4 本章中的重要公式 24412.4.1 基本引力 24412.4.2 引力公式的JavaScript實現(xiàn) 24412.5 小結(jié) 244第13章 正向運動學(xué):讓物體行走 24513.1 介紹正向和反向運動學(xué) 24513.2 正向運動學(xué)編程入門 24613.2.1 移動一個節(jié)段 24613.2.2 移動兩個節(jié)段 25113.3 過程自動化 25313.3.1 建立一個自然行走周期 25413.3.2 動態(tài)調(diào)整 25713.4 讓它真實地行走 26013.4.1 給它一些空間 26013.4.2 加入重力 26013.4.3 處理碰撞 26113.4.4 處理反作用力 26213.4.5 屏幕環(huán)繞,重復(fù) 26413.5 小結(jié) 267第14章 反向運動學(xué):拖曳與伸出 26814.1 伸出和拖曳單個節(jié)段 26814.1.1 伸出單個節(jié)段 26914.1.2 拖曳單個節(jié)段 27014.2 拖曳多個節(jié)段 27014.2.1 拖曳兩個節(jié)段 27114.2.2 拖曳更多節(jié)段 27214.3 伸出多個節(jié)段 27414.3.1 伸向鼠標(biāo)位置 27414.3.2 伸向一個物體 27914.3.3 加入一些交互 28014.4 使用標(biāo)準(zhǔn)反向運動學(xué)方法 28114.4.1 介紹余弦定理 28114.4.2 編程實現(xiàn)余弦定理 28314.5 本章中的重要公式 28514.5.1 余弦定理 28514.5.2 JavaScript中的余弦定理 28514.6 小結(jié) 285第四部分 3D動畫第15章 三維基礎(chǔ) 28815.1 第三維度與透視圖 28915.1.1 z軸 28915.1.2 透視圖 29015.2 速度與加速度 29315.3 反彈 29515.3.1 單物體反彈 29515.3.2 多物體反彈 29715.3.3 Z排序 30015.4 重力 30115.5 屏幕環(huán)繞 30415.6 緩動與彈動 31115.6.1 緩動 31115.6.2 彈動 31215.7 坐標(biāo)旋轉(zhuǎn) 31415.8 碰撞檢測 31915.9 本章中的重要公式 32115.9.1 基本透視圖 32115.9.2 Z排序 32115.9.3 坐標(biāo)旋轉(zhuǎn) 32215.9.4 三維距離計算 32215.10 小結(jié) 322第16章 三維線條與填充 32316.1 創(chuàng)建點和線 32316.2 創(chuàng)建圖形 32816.3 創(chuàng)建三維填充 33216.3.1 使用三角形 33216.4 三維實體建!33716.4.1 建模旋轉(zhuǎn)的立方體 33716.4.2 建模其他形狀 33916.5 移動三維實體 34316.6 小結(jié) 344第17章 背面剔除與三維燈光 34517.1 背面剔除 34617.2 增強的深度排序 34817.3 三維燈光 34917.4 小結(jié) 356第五部分 其他技巧第18章 矩陣數(shù)學(xué) 35818.1 矩陣基礎(chǔ) 35818.2 矩陣運算 35918.2.1 矩陣加法 35918.2.2 矩陣乘法 36018.3 canvas變換 36318.4 小結(jié) 366第19章 秘訣與技巧 36719.1 布朗(隨機)運動 36719.2 隨機分布 37019.2.1 正方形分布 37019.2.2 圓形分布 37219.2.3 偏向分布 37419.2.4 基于碰撞的分布 37619.3 基于定時器和基于時間的動畫 37819.3.1 基于定時器的動畫 37819.3.2 基于時間的動畫 37919.4 等質(zhì)量物體之間的碰撞 38119.5 集成聲音 38219.6 小結(jié) 385附錄A 常用公式 386A.1 第3章 386A.1.1 三角學(xué)基礎(chǔ)函數(shù) 386A.1.2 角度與弧度互轉(zhuǎn) 386A.1.3 朝鼠標(biāo)指針(或任意一點)旋轉(zhuǎn) 386A.1.4 創(chuàng)建波 386A.1.5 創(chuàng)建圓形 387A.1.6 創(chuàng)建橢圓形 387A.1.7 獲取兩點間的距離 387A.2 第4章 387A.2.1 從十六進制轉(zhuǎn)換到十進制 387A.2.2 從十進制轉(zhuǎn)換到十六進制 387A.2.3 組合三原色 387A.2.4 提取三原色 388A.2.5 繪制一條穿越某個點的曲線 388A.3 第5章 388A.3.1 將角速度分解為x、y軸上的速度向量 388A.3.2 將角加速度(作用于物體上的力)分解為x、y軸上的加速度 388A.3.3 將加速度加入速度向量 388A.3.4 將速度向量加入位置坐標(biāo) 388A.4 第6章 388A.4.1 移除越界物體 388A.4.2 重置越界物體 389A.4.3 屏幕環(huán)繞越界物體 389A.4.4 應(yīng)用摩擦力(正確方法) 389A.4.5 應(yīng)用摩擦力(簡便方法) 389A.5 第8章 389A.5.1 簡單緩動,詳細版 389A.5.2 簡單緩動,縮略版 390A.5.3 簡單緩動,簡易版 390A.5.4 簡單彈動,詳細版 390A.5.5 簡單彈動,縮略版 390A.5.6 簡單彈動,簡易版 390A.5.7 有偏移量的彈動 390A.6 第9章 391A.6.1 基于距離的碰撞檢測 391A.6.2 多物體碰撞檢測 391A.7 第10章 391A.7.1 坐標(biāo)旋轉(zhuǎn) 391A.7.2 反向坐標(biāo)旋轉(zhuǎn) 391A.8 第11章 391A.8.1 動量守恒的數(shù)學(xué)表示 391A.8.2 動量守恒的JavaScript代碼 392A.9 第12章 392A.9.1 基本引力 392A.9.2 引力公式的JavaScript實現(xiàn) 392A.10 第14章 392A.10.1 余弦定理 392A.10.2 JavaScript中的余弦定理 392A.11 第15章 393A.11.1 基本透視圖 393A.11.2 Z排序 393A.11.3 坐標(biāo)旋轉(zhuǎn) 393A.11.4 三維距離計算 393
媒體關(guān)注與評論
HTML5+JavaScript是目前最熱的移動應(yīng)用開發(fā)技術(shù)。在HTML5的諸多新特性中,HTML5 Canvas是其中最吸引人的特性之一。它由JavaScript腳本進行控制,可以動態(tài)地繪制出各種2D圖形,甚至可以對圖像像素進行任意處理。本書是面向游戲和娛樂應(yīng)用開發(fā)的HTML5圖書,在書中我們將通過最流行的Web前端開發(fā)語言JavaScript操縱Canvas來實現(xiàn)各種各樣的動畫效果,通過各種各樣的示例可以觸發(fā)你聯(lián)想到如何將它們組合在一起以實現(xiàn)你的創(chuàng)意。
編輯推薦
通過HTML5+JavaScript動畫基礎(chǔ),你將進入Web編程創(chuàng)意的新時代。HTML5+JavaScript動畫基礎(chǔ)詳細介紹了如何使用HTML5的canvas元素來創(chuàng)建高級Web圖形和動態(tài)腳本動畫。它涵蓋了要完成各種動畫項目所必需掌握的所有技能——從游戲到導(dǎo)航系統(tǒng),從廣告到教育應(yīng)用程序。在HTML5+JavaScript動畫基礎(chǔ)中,作者Billy Lamberta首先清晰地介紹了所有相關(guān)的數(shù)學(xué)知識,然后引入了加速度、速度向量、緩動、彈動、碰撞檢測、動量守恒、3D、正向運動學(xué)和反向運動學(xué)等物理概念。他還幫你建立了一個工具集,,你可以把這些工具融入自己編寫的任意動畫腳本中來創(chuàng)建動態(tài)效果。在任何時候,你都能購理解隱藏在腳本動畫背后的概念,而且還可以創(chuàng)建各種各樣令人激動的動畫和游戲。對于所有使用HTML5或從Flash轉(zhuǎn)到HTML5的Web開發(fā)人員來說,HTML5+JavaScript動畫基礎(chǔ)正是你們夢寐以求的,它可以引領(lǐng)你創(chuàng)建各種能夠在當(dāng)前所有的瀏覽器和大多數(shù)移動設(shè)備(包括iPhone、iPad和Android設(shè)備)上運行的完全符合標(biāo)準(zhǔn)的游戲、應(yīng)用程序、動畫。
圖書封面
圖書標(biāo)簽Tags
無
評論、評分、閱讀與下載
本文關(guān)鍵詞:HTML5+JavaScript動畫基礎(chǔ),由筆耕文化傳播整理發(fā)布。
本文編號:222924
本文鏈接:http://sikaile.net/wenshubaike/mishujinen/222924.html