设备方向事件与设备运动事件以及简单的摇一摇实现

设备方向事件

当设备的物理方向改变(如果用户倾斜或旋转设备)且改变幅度大于等于 0.01 度时,触发 DeviceOrientationEvent 对象。DeviceOrientationEvent 对象提供的数据可指定设备在地球固定坐标系上的对应方向。具体而言,此地球坐标系包含以下三个轴: 东方轴 (X) 为地平面,垂直于北方轴且正对东方。 北方轴 (Y) 为地平面,正对正北方(指向北极)。 上方轴 (Z) 垂直于地平面并与地平面正对。

这些(X、Y 和 Z)轴分别对应于 三个主要的属性:

alpha: 在围绕 z 轴旋转时(即左右旋转时),y 轴的度数差。 beta: 在围绕 x 轴旋转时(即前后旋转时),z 轴的度数差。 gamma: 在围绕 y 轴旋转时(即扭转设备时),z 轴的度数差。

以下代码显示如何使用 deviceorientation 事件指导用户使其设备指向北方。

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">

</head>

<body>

<div id="directions" style="padding:20px; text-align:center; font-size:14px;"></div>

<script>

window.addEventListener("deviceorientation", findNorth);

function findNorth(evt) {

var directions = document.getElementById("directions");

if (evt.alpha < 5 || evt.alpha > 355) {

directions.innerHTML = "北";

} else if (evt.alpha < 180) {

directions.innerHTML = "左转";

} else {

directions.innerHTML = "右转";

}

}

</script>

</body>

</html>

提示:你可以先修改部分代码再运行。

设备运动事件

当移动或旋转(或者更精确地说是加速)设备时,会触发 DeviceMotionEvent 对象,并在 x、y 和 z 轴中提供 acceleration data(重力加速度对设备造成的 with 和 without 影响,用 m/s2 表示),并会在 alpha、beta 和 gamma 旋转角度中提供 rotational rate of change data(用 deg/s表示)。旋转遵循右手规则,这样,当顺着轴正向观察时,围绕该轴所做的正向旋转为顺时针旋转。 以下示例演示如何使用 ondevicemotion 事件检测和报告高于指定阈值的所有设备运动。

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">

</head>

<body>

<div id="status" style="padding:20px; text-align:center; font-size:14px;"></div>

<script>

window.addEventListener("devicemotion", detectShake);

function detectShake(evt) {

var status = document.getElementById("status");

var accl = evt.acceleration;

if (accl.x > 1.5 || accl.y > 1.5 || accl.z > 1.5) {

status.innerHTML = "EARTHQUAKE!!!";

} else {

status.innerHTML = "All systems go!";

}

}

</script>

</body>

</html>

提示:你可以先修改部分代码再运行。

下面我们就可以利用 设备运动事件 来简单实现 摇一摇 的功能了(使用支持该事件的移动设备访问)

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">

<title>demo</title>

<style>

*{margin:0;font-size:14px;}

</style>

<script src="http://s1.pp.itc.cn/ux_cloud_atlas/js/lib/requirejs/require-jquery-1.7.2.js" ></script>

<script type="text/javascript">

var color = new Array('#fff', '#fA0', '#f00', '#C00', '#03f', '#0ff');

if(window.DeviceMotionEvent) {

var speed = 20;

var x = y = z = lastX = lastY = lastZ = 0;

window.addEventListener('devicemotion', function(){

var acceleration =event.accelerationIncludingGravity;

x = acceleration.x;

y = acceleration.y;

z = acceleration.z;

if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {

document.body.style.backgroundColor = color[Math.round(Math.random()*10)%6];

$('#dataX').html(x);

$('#dataY').html(y)

$('#dataZ').html(z)

}

lastX = x;

lastY = y;

}, false);

};

</script>

</head>

<body>

<h1>demo</h1>

<h2>event.accelerationIncludingGravity.x</h2>

<div id="dataX"></div>

<h2>event.accelerationIncludingGravity.y</h2>

<div id="dataY"></div>

<h2>event.accelerationIncludingGravity.z</h2>

<div id="dataZ"></div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iOS开发攻城狮的集散地

iOS 音乐播放器之锁屏歌词+歌词解析+锁屏效果

好了,就说这么多了,demo中注释的还算是清楚的,感兴趣的可以去look look??!

32814
来自专栏Coco的专栏

【BOOM】一款有趣的Javascript动画效果

1355
来自专栏iOS开发攻城狮的集散地

iOS 音乐播放器之锁屏歌词+歌词解析+锁屏效果

2847
来自专栏WebHub

简单了解下无障碍设计模式

一款设计良好的产品可供所有能力的用户使用,包括视力低下、失明、听力障碍、认知障碍或运动障碍的用户。改进产品的无障碍功能可以增强所有用户的可用性,这是非常值得做的...

1554
来自专栏xx_Cc的学习总结专栏

iOS-QQ音乐播放器的简单实现

39313
来自专栏carven

利用canvas实现毛笔字帖(二)

2. 第2部分write.js 第二部分决定先介绍write部分,因为controller部分必须要结合write部分才能看到效果。 针对write.js部分,...

3200
来自专栏非著名程序员

Android中图片大小和屏幕密度的关系讲解

Android手机适配是非常让人头疼的一件事,尤其是图片,android为了做到是适配提供了很多文件夹来存放不同大小的图片,比如:drawable-ldpi、d...

1926
来自专栏進无尽的文章

UI篇-Layer几个关键点补充

强大的UIView是基于 CALayer实现的,它的重要性不言而喻,相信大家也都有自己的研究和理解,今天这片文章里的内容是几个关键点的补充。

661
来自专栏拂晓风起

【Fanvas技术解密】HTML5 canvas实现脏区重绘

1502
来自专栏熊二哥

Html与CSS快速入门02-HTML基础应用

这部分是html细节知识的学习。 ? 示例代码:https://github.com/wanliwang/Bjork.Demo htmlDemo 最近胡乱删除...

2296

扫码关注云+社区