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

设备方向事件

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

相关文章

来自专栏Coco的专栏

纯 CSS 实现波浪效果!

2334
来自专栏HenCoder

Android 开发进阶: 自定义 View 1-1 绘制基础

从今天开始,HenCoder 就正式开讲知识技能了。按照我的计划,第一季是 UI,UI 一共分为三部分:绘制、布局和触摸反馈。本期是绘制部分的第一期。绘制大概会...

642
来自专栏清墨_iOS分享

iOS 惯性滑动效果

最近公司SDK新搞了个功能,手势滑动地图后,要具备惯性滑动效果的功能。安卓是先做出来了,然后给我看,由于我早体验过某鸟地图,某鸟地图也有这种效果,加上安卓做得确...

3817
来自专栏阿凯的Excel

金字塔图绘制(Excel绘制图表系列课程)

今天和大家分享金字塔图的绘制 什么是金字塔图呢?就是长得很像金字塔的图! 哦! 问:那是长这样? ? 答:额,有点像,但是不是! 问:那是怎样? 答:如下图。...

2813
来自专栏计算机编程

官方自适应新布局ConstraintLayout

谷歌在2016年自己研发的类似于IOS约束的布局,可以很好的完成自定义的布局控件的适配,现如今2K甚至是4K屏的出现,导致很多手机应用的开发受到适配上的限制,但...

682
来自专栏Coco的专栏

不可思议的混合模式 background-blend-mode

1325
来自专栏HTML5学堂

各大公司移动端页面 - 导航的实现

HTML5学堂:伴随着科技的发展,出现了各种型号的手机,导致了HTML5移动端开发人员对页面的实现要求更高了。目前来说,移动端的实现方法没有一个统一的标准,大家...

3107
来自专栏前端架构

第四代CSS选择器,那些让你激动的新特性(转)

英国的网络开发人员、作家以及演讲家Rachel Andre在Webdesigner Depot发表了文章《 CSS You Can Get Excited Ab...

672
来自专栏Android群英传

花式实现图片3D翻转效果

511
来自专栏编程

带有CSS3的动画3D条形图

关于如何使用CSS创建动画三维条形图的教程。 ? 这一切都是从一个小实验开始的,这个实验受到了来自Nettuts +的教程的启发,它展示了如何使用CSS,图像和...

1808

扫码关注云+社区