第二章：讲解一些常用的动画技术形式、移动端设备API、最近非常热门的VR及常见的技术创意组合形式，可以让移动页面实现更多的互动效果。
2.1 动画形式
2.1.1 CSS3
CSS的英文全名是Cascading Style Sheets，简写CSS，又称为层叠样式表。
-
Transform（变形）
-
Transition（转换）
-
Animation（动画）
-
经验心得及代码技巧
可以看做：准备 —> 动作1 —> 动作2 ... —> 动作N —> 退场
几个示例动画的链接：
示例动画1
示例动画2
2.1.2 帧动画
目前运用于移动端页面的帧动画形式主要有三种控制方式：
- 一种是通过CSS3动画来控制；
- 一种是通过JavaScript控制Canvas；
- 一种是通过JavaScript控制CSS。
2.1.3 Canvas
与其他元素不同，它的主要用途是处理或从头创建2D图形，而不是嵌入audio和video元素那样直接将现有的媒体嵌入网页中去。
动画的本质就是一连串的图像，每个图像之间的差别非常微小，并且它们以极快的速度连续显示。
对于Canvas来说，就是在屏幕上绘制一些对象，然后清除屏幕上的对象，接着快速在屏幕上绘制其他对象——更新图像。
具体内容查看 P100-P104
2.1.4 SVG
SVG是一种比较古老的技术，它是可伸缩矢量图形的简称。
因为SVG是矢量图形，因此相比一般的图片，SVG具有很好的可伸缩性。同样的图形，SVG的体积要比一般图片小很多。我们可以通过JavaScript和CSS来操作SVG，从而实现一般图片无法实现的效果。不过，SVG有一定的浏览器兼容性问题。
具体内容查看 P105-P109
2.1.5 Three.js
Three.js是一个基于JavaScript，使用方便，运行在浏览器中的轻量级3D框架，可以使用它创建各种三维场景，包括摄影机、光影材质等各种对象。
为了使用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则是给了开发者对音频进行分析、处理的能力，如混音和过滤。对系统的要求是，iOS6.0+和Android4.4+
2.2.6 地理定位（Geolocation API）
两个比较常用的方法，getCurrentPosition()用于获取一次用户的当前地理位置，watchPosition()用于持续获取用户的当前地理位置，直至使用clearWatch()方法取消。
2.2.7 陀螺仪
deviceOrientation API
封装了方向传感器数据的事件，可以获取用户设备静止状态下的方向数据，如手机所处的角度、方位及朝向等。
deviceMotion API
封装了运动传感器数据事件，可以获取手机运动状态下的运动加速度数据。
设备震动（Vibration API）
电池状态（Battery API）
环境光（Ambient Light）
网络信息
想要获取移动设备的网络信息，一般可以通过两种方式：一是通过获取navigator的属性online/offline，简单的判断是否连接网络；二是通过获取Network Information API里的navigator.connection.type对象，获取移动设备的网络种类。
平台JSSDK
2.3 WebVR
2.3.1 实现步骤
- 第一步：搭建场景
- 第二步：交互
- 第三步：分屏
2.3.2 常用WebVR解决方案
-
A-frame
Mozilla的开源框架，通过定制HTML元素即可构建WebVR方案的框架，适用于没有WebGL与threeJS基础的学者。
A-frame的优点是基于threeJS的封装，通过特定的标签就能够快速创建VR网页；缺点就是提供的组件有限，难以完成较复杂的项目。
可以参考 A-frame DOC -
基于ThreeJS与WebVR组件
事实上，A-frame就是基于这两者的封装。
这种方案的优点是可以完成复杂项目，可以结合原生的WebGL；缺点是需要掌握ThreeJS，需要了解WebGL，学习成本较高。
具体的内容可以参考 webvr-polyfill
2.4 创意点
参考本书 P142-P152
网友评论