这篇文章主要为大家详细介绍了 javascript html5 摇一摇功能的实现过程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
通过网上的资料,加上自己的整理,写了一份 html 摇一摇功能的简介,用做技术备份。
知识要点
1、DeviceMotionEvent
这是 html5 支持的重力感应事件,关于文档请看:{aa0aa}
事件介绍:
deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角。
devicemotion 提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。
compassneedscalibration 用于通知 web 站点使用罗盘信息校准上述事件。
2、事件简介
window.addEventListener("deviceorientation",function(event){// 处理 event.alpha、event.beta 及 event.gamma},true);
- {
- alpha: 90,
- beta: 0,
- gamma: 0
- };
这是 deviceorientation 事件返回的参数,为了获得罗盘指向,可以简单的使用 360 度减去 alpha。若设被平行于水平表面,其罗盘指向为 (360 - alpha)。 若用户手持设备,屏幕处于一个垂直平面且屏幕顶端指向上方。beta 的值为 90,alpha 和 gamma 无关。 用户手持设备,面向 alpha 角度,屏幕处于一个垂直屏幕,屏幕顶端指向右方,则其方向信息如下
- {
- alpha: 270 - alpha,
- beta: 0,
- gamma: 90
- };
注册一个 devicemotion 事件的接收器:
- window.addEventListener("devicemotion",
- function(event) { // 处理event.acceleration、event.accelerationIncludingGravity、// event.rotationRate和event.interval},true);
将设备安置于车辆之上,屏幕处于一个垂直平面,顶端向上,面向车辆后部。车辆行驶速度为 v,向右侧进行半径为 r 的转弯。设备记录 acceleration 和 accelerationIncludingGravity 在位置 x 处的情况,同时设备还会记录 rotationRate.gamma 的负值:
- {
- acceleration: {
- x: v ^ 2 / r,
- y: 0,
- z: 0
- },
- accelerationIncludingGravity: {
- x: v ^ 2 / r,
- y: 0,
- z: 9.81
- },
- rotationRate: {
- alpha: 0,
- beta: 0,
- gamma: -v / r * 180 / pi
- }
- };
功能实现
- if(window.DeviceMotionEvent){
- window.addEventListener('devicemotion', YaoYiYao,false);
- }
- var speed =30;//speed
- var x = y = z = lastX = lastY = lastZ =0;
- function YaoYiYao(eventData){
- var acceleration =eventData.accelerationIncludingGravity;
- x = acceleration.x;
- y = acceleration.y;
- z = acceleration.z;
- if(Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed){
- //简单的摇一摇触发代码
- alert(1);
- }
- lastX = x;
- lastY = y;
- lastZ = z;
- }
首先判断浏览器是否支持该事件。
YaoYiYao 用来检测是否对手机进行摇动操作,具体就是获取手机的的移动数据,将其存在一个外部变量中,当下次又触发摇动事件时,判断上次的摇动坐标 和现在的摇动坐标 是否处于一个频繁调动的范围:Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed
基本上 满足这种条件的话,就是手机正处于摇动状态,在 if 语句里面添加进你要执行的摇一摇代码即可。
来源: http://www.phperz.com/article/17/0225/266251.html