HTML5重要特性DeviceOrientation与devicemotion
2016-10-08 09:25
344 查看
一.前言 通过html5重要特性DeviceOrientation与devicemotion实现移动端摇一摇与重力感应事件。二.DeviceMotion DeviceMotion:deviceMotion封装了运动传感器数据的事件,可以获取手机运动状态下的运动加速度等数据。 DeviceMotionEvent: 1.event.accelaration:x(y,z):设备在x(y,z)方向上的移动加速度值。 2.event.accelarationIncludingGravity:x(y,z):考虑了重力加速度后设备在x(y,z)方向上的移动加速度值。 3.event.rotationRate:alpha,beta,gamma:设备绕x,y,z轴旋转的角度。 event.accelarationIncludingGravity与event.accelaration的区别在于前者加入了重力加速度,即在z轴方向加了9.8,在x,y方向上的 值两者相同。示例:(当手机摇晃页面时,会弹出shaked的提示,并且在页面上显示摇晃时的x,y,z方向的加速度值。)
属性 | 值 |
---|---|
SHAKE_THRESHOLD | 阈值。阈值越大,触发摇晃事件时手机摇晃的程度越剧烈 |
x | x方向的加速值 |
y | y方向的加速值 |
z | z方向的加速值 |
deviceMotionHandler | 摇晃事件处理程序 |
方法 | 作用 |
---|---|
init | 初始化Shake对象 |
参数 | 值 |
---|---|
threshold | 自定义阈值,默认2000 |
callback | 摇晃后的回调函数 |
function Shake(threshold, callback) {this.SHAKE_THRESHOLD = threshold ? threshold : 2000; //定义阈值this.last_update = 0;this.x = this.y = this.z = this.last_x = this.last_y = this.last_z = 0;this.init = function() {if (window.DeviceMotionEvent) {window.addEventListener('devicemotion', this.deviceMotionHandler, false);} else {alert('您的浏览器不支持DeviceMotion');}};var that = this;this.deviceMotionHandler = function(eventData) {var acceleration = eventData.accelerationIncludingGravity;var curTime = new Date().getTime();if ((curTime - that.last_update) > 100) {var diffTime = curTime - that.last_update;that.last_update = curTime;that.x = acceleration.x;that.y = acceleration.y;that.z = acceleration.z;var speed = Math.abs(that.x + that.y + that.z - that.last_x - that.last_y - that.last_z) / diffTime * 10000;if (speed > 2000) {document.getElementById("speed").innerHTML = speed;}//document.getElementById("speed").innerHTML = curTime +" -"+ that.last_update + "=" + diffTime;if (speed > that.SHAKE_THRESHOLD) {if (window.console && console.log) {console.log("shaked");}if (callback != undefined) {callback(that);}}that.last_x = that.x;that.last_y = that.y;that.last_z = that.z;}}};
window.onload = function() {var shake1 = new Shake(2000, function(obj) {//alert("shaked");var r = document.getElementById("result");r.innerHTML = "x:" + parseInt(obj.x) + "";r.innerHTML += "y:" + parseInt(obj.y) + "";r.innerHTML += "z:" + parseInt(obj.z) + "";});shake1.init();};三.DeviceOrientationEvent工作原理:根据event对象的三个方向的参数来确定设备的旋转角度。其中,alpha的取值范围是0-360,这个需要根据设备的指南针设定情况而定,一般来说,设备指向正北方向时为0.beta值为设备绕x轴旋转的角度,取值范围为-180-180。gamma取值范围-90-90.属性 值1.alpha 设备指示的方向,根据指南针的设定情况而定2.beta 设备绕x轴旋转的角度3.gamma 设备绕y轴旋转的角度 示例:
if (window.DeviceOrientationEvent) {window.addEventListener('deviceorientation', DeviceOrientationHandler, false);} else {alert("您的浏览器不支持DeviceOrientation");}function DeviceOrientationHandler(event) {var alpha = event.alpha,beta = event.beta,gamma = event.gamma,stage = document.getElementById("result"),dataContainerOrientation = document.getElementById("result2"),yy = document.getElementById("result3");if (alpha != null || beta != null || gamma != null) {dataContainerOrientation.innerHTML = "alpha:" + parseInt(alpha) + "<br />beta:" + parseInt(beta) + "<br />gamma:" + parseInt(gamma);//判断屏幕方向var html = "";var gamma_html = "";if (gamma > 0) {gamma_html = "向右倾斜";} else {gamma_html = "向左倾斜";}//html += "<br />" + gamma_htmlyy.innerHTML = gamma_html;} else {dataContainerOrientation.innerHTML = "当前浏览器不支持DeviceOrientation";}}这里面alpha值的意义并不大,主要参考beta和gamma值。 当屏幕从水平沿y轴向左倾斜时gamma值变为负值,向右倾斜变为正值。 档屏幕从水平沿x轴向前倾斜时beta值变为正值,向后倾斜时变为负值。 所以,如果我们设定一个阈值,当beta和gamma的绝对值大于这个阈值时,我们就认为设备发生了旋转。另外根据beta和 gamma的值来判断向左倾斜还是向右倾斜,以及倾斜的程度。[b]四.两者区别[/b] 1.DeviceOrientationEvent的值是相对于初始状态的差值,只要设备方向不变,怎么动都不会影响数值; 2.DeviceMotionEvent是相对于之前的某个瞬间值的差值时间比,即变化的速度,一旦设备静止则会恢复为0。[b]五.兼容性[/b]大部分浏览器兼容,如图
相关文章推荐
- 利用HTML5的一个重要特性—DeviceOrientation来实现手机网站上的摇一摇功能(转)
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
- html5 5个重要特性
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
- 论述HTML5平台的若干重要特性
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
- 论述HTML5平台的若干重要特性
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
- 论述HTML5平台的若干重要特性
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
- 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能
- The Expressive Web:最具创意的HTML5和CSS3特性展示
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和HTML5?
- linq和几个重要的C#语言特性
- 关于HTML5你必须知道的28个新特性,新技巧以及新技
- DBA_Oracle Database 11g 面向 DBA 和开发人员的重要特性
- 小强的HTML5移动开发之路(2)——HTML5的新特性