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

设备方向事件

当设备的物理方向改变(如果用户倾斜或旋转设备)且改变幅度大于等于 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 条评论
登录 后参与评论

相关文章

来自专栏程序员的诗和远方

Canvas基础-粒子动画Part3

在上一篇文章 Canvas基础-粒子动画Part2 中讲了让图片做粒子动画。上篇写完不久,想起既然是用Canvas,写上去的东西都可以做粒子动画,那么就补充讲...

43090
来自专栏carven

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

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

57900
来自专栏進无尽的文章

UI篇-Layer几个关键点补充

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

12610
来自专栏大数据钻研

手把手教你打造一个纯CSS图标库

来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉...

33340
来自专栏Web行业观察

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

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

34940
来自专栏james大数据架构

Android中关于dip和px以及转换的总结

我们在页面布局的时候,经常会设置容器的长度,但是到底该使用哪个作为长度的单位而懊恼。在Android中支持的描述大小区域的类型有以下几种: px(pixels)...

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

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

563130
来自专栏小芭乐的专栏

Markdown 编辑器指南

Markdown 是一种轻量级标记语言。语法简单明了,浏览本篇指引文章,学会使用markdown,就可以开始写文章了。markdown编辑器采用左边纯markd...

57520
来自专栏HTML5学堂

几个前端工程师应当掌握的“词语”

HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,...

36760
来自专栏偏前端工程师的驿站

CSS魔法堂:Absolute Positioning就这个样

前言 当我们以position:absolute之名让元素脱离Normal flow的控制后,以为通过left和top属性值即可让元素得以无限的自由时,却发现还...

23370

扫码关注云+社区

领取腾讯云代金券