二、技术创意形式

《指尖上行——移动前端开发进阶之路》学习笔记

第二章：讲解一些常用的动画技术形式、移动端设备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

手机QQ请访问：QQ文档
微信请访问：微信文档

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