javascript html5摇一摇功能的实现

站长资源 2024/11/29 佚名

54 1538 54

DDR爱好者之家 Design By 杰米

通过网上的资料，加上自己的整理，写了一份html摇一摇功能的简介，用做技术备份。
知识要点

1、DeviceMotionEvent
这是html5支持的重力感应事件，关于文档请看：http://w3c.github.io/deviceorientation/spec-source-orientation.html
事件介绍：
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语句里面添加进你要执行的摇一摇代码即可。

以上就是html5摇一摇功能的实现思路，希望对大家的学习有所帮助。

javascript,html5摇一摇

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“javascript html5摇一摇功能的实现”

暂无评论...

javascript html5摇一摇功能的实现

js点击返回跳转到指定页面实现过程

一些实用性较高的js方法

评论“javascript html5摇一摇功能的实现”

更新日志

友情链接