第二章：講解一些常用的動畫技術(shù)形式、移動端設備API兔毒、最近非常熱門的VR及常見的技術(shù)創(chuàng)意組合形式，可以讓移動頁面實現(xiàn)更多的互動效果甸箱。
2.1 動畫形式
2.1.1 CSS3
CSS的英文全名是Cascading Style Sheets育叁，簡寫CSS，又稱為層疊樣式表芍殖。
-
Transform（變形）
-
Transition（轉(zhuǎn)換）
-
Animation（動畫）
-
經(jīng)驗心得及代碼技巧
可以看做：準備 —> 動作1 —> 動作2 ... —> 動作N —> 退場
幾個示例動畫的鏈接：
示例動畫1
示例動畫2
2.1.2 幀動畫
目前運用于移動端頁面的幀動畫形式主要有三種控制方式：
- 一種是通過CSS3動畫來控制豪嗽；
- 一種是通過JavaScript控制Canvas；
- 一種是通過JavaScript控制CSS围小。
2.1.3 Canvas
與其他元素不同昵骤，它的主要用途是處理或從頭創(chuàng)建2D圖形，而不是嵌入audio和video元素那樣直接將現(xiàn)有的媒體嵌入網(wǎng)頁中去肯适。
動畫的本質(zhì)就是一連串的圖像变秦，每個圖像之間的差別非常微小，并且它們以極快的速度連續(xù)顯示框舔。
對于Canvas來說蹦玫，就是在屏幕上繪制一些對象赎婚，然后清除屏幕上的對象，接著快速在屏幕上繪制其他對象——更新圖像樱溉。
具體內(nèi)容查看 P100-P104
2.1.4 SVG
SVG是一種比較古老的技術(shù)挣输，它是可伸縮矢量圖形的簡稱。
因為SVG是矢量圖形福贞，因此相比一般的圖片撩嚼，SVG具有很好的可伸縮性。同樣的圖形挖帘，SVG的體積要比一般圖片小很多完丽。我們可以通過JavaScript和CSS來操作SVG，從而實現(xiàn)一般圖片無法實現(xiàn)的效果拇舀。不過逻族，SVG有一定的瀏覽器兼容性問題。
具體內(nèi)容查看 P105-P109
2.1.5 Three.js
Three.js是一個基于JavaScript骄崩，使用方便聘鳞，運行在瀏覽器中的輕量級3D框架，可以使用它創(chuàng)建各種三維場景要拂，包括攝影機抠璃、光影材質(zhì)等各種對象。
為了使用Three.js宇弛，首先下載WebGL框架鸡典，地址為https://github.com/mrdoob/three.js，然后配置本地服務器枪芒，添加MIME類型彻况，方便瀏覽examples中的示例。
可以查閱: 官方文檔
本書請參考P110-P113
參考 實例
2.2 移動設備Web API詳解
2.2.1 視頻（Video）
2.2.2 音頻（Audio）
2.2.3 媒體流（getUserMedia）
訪問攝像頭和麥克風
2.2.4 Web Speech
通過語音就能讓用戶和Web進行交互舅踪，這就是Web Speech纽甘。
2.2.5 Web Audio API
Audio對象提供的只是音頻文件的播放，而Web Audio則是給了開發(fā)者對音頻進行分析抽碌、處理的能力悍赢，如混音和過濾。對系統(tǒng)的要求是货徙，iOS6.0+和Android4.4+
2.2.6 地理定位（Geolocation API）
兩個比較常用的方法左权，getCurrentPosition()用于獲取一次用戶的當前地理位置，watchPosition()用于持續(xù)獲取用戶的當前地理位置痴颊，直至使用clearWatch()方法取消赏迟。
2.2.7 陀螺儀
deviceOrientation API
封裝了方向傳感器數(shù)據(jù)的事件，可以獲取用戶設備靜止狀態(tài)下的方向數(shù)據(jù)蠢棱，如手機所處的角度锌杀、方位及朝向等甩栈。
deviceMotion API
封裝了運動傳感器數(shù)據(jù)事件，可以獲取手機運動狀態(tài)下的運動加速度數(shù)據(jù)糕再。
設備震動（Vibration API）
電池狀態(tài)（Battery API）
環(huán)境光（Ambient Light）
網(wǎng)絡信息
想要獲取移動設備的網(wǎng)絡信息量没，一般可以通過兩種方式：一是通過獲取navigator的屬性online/offline，簡單的判斷是否連接網(wǎng)絡突想；二是通過獲取Network Information API里的navigator.connection.type對象殴蹄，獲取移動設備的網(wǎng)絡種類。
平臺JSSDK
2.3 WebVR
2.3.1 實現(xiàn)步驟
- 第一步：搭建場景
- 第二步：交互
- 第三步：分屏
2.3.2 常用WebVR解決方案
-
A-frame
Mozilla的開源框架蒿柳，通過定制HTML元素即可構(gòu)建WebVR方案的框架饶套，適用于沒有WebGL與threeJS基礎的學者。
A-frame的優(yōu)點是基于threeJS的封裝垒探，通過特定的標簽就能夠快速創(chuàng)建VR網(wǎng)頁怠李；缺點就是提供的組件有限圾叼，難以完成較復雜的項目。
可以參考 A-frame DOC -
基于ThreeJS與WebVR組件
事實上捺癞，A-frame就是基于這兩者的封裝夷蚊。
這種方案的優(yōu)點是可以完成復雜項目，可以結(jié)合原生的WebGL髓介；缺點是需要掌握ThreeJS惕鼓，需要了解WebGL，學習成本較高唐础。
具體的內(nèi)容可以參考 webvr-polyfill
2.4 創(chuàng)意點
參考本書 P142-P152
