HTML5手机重力与方向感应的应用—

HTML5有一个重要特性：DeviceOrientation，它将底层的方向和运动传感器进行了高级封装，它使我们能够很容易的实现重力感应、指南针等有趣的功能。本文将结合实例给大家介绍使用HTML5的重力运动和方向传感器实现手机摇一摇效果。

查看演示下载源码

DeviceOrientation包括两个事件：

1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手机所处角度、方位、朝向等。

2、deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

HTML

页面上有一个div#hand，用来放置一个手摇的图片，div#result用来展示摇动后的结果信息。

<div id="hand" class="hand hand-animate"></div>
<div id="result"></div>

我们可以使用CSS3来增强页面效果，使用-webkit-animation动画效果实现手摇图片的动态效果，具体请下载源代码查看。

Javascript

“摇一摇”这个动作即“一定时间内设备了一定距离”，因此通过devicemotion监听设备晃动获取到的x, y, z轴的值在一定时间范围内的变化率，即判断设备是否有进行晃动。而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。

HTML5判断设备晃动的代码我们使用已经封装好的shake.js，项目地址：https://github.com/alexgibson/shake.js。

<script src="shake.js"></script>

首先实例化Shake，然后启动开始监听设备运动情况，监听设备运动，回调监听结果：shakeEventDidOccur。

window.onload = function() { var myShakeEvent = new Shake({ threshold: 15 }); myShakeEvent.start(); window.addEventListener('shake', shakeEventDidOccur, false); function shakeEventDidOccur () { var result = document.getElementById("result"); result.className = "result"; var arr = ['妹子一枚','福利图片一套','码农笔记一本','土豪金一台']; var num = Math.floor(Math.random()*4); result.innerHTML = "恭喜，摇得"+arr[num]+"！"; setTimeout(function(){ result.className = "result result-show"; }, 1000); }
};

这里，函数shakeEventDidOccur()可以自定义，本例是将摇晃后的结果返回在页面上展示出来，请看DEMO演示。

来源于helloweba.com 原文链接：http://www.helloweba.com/view-blog-287.html

下载shake：shake.js-master

justcode.ikeepstudying.com

HTML5手机重力与方向感应的应用——摇一摇效果相关推荐

html5之DeviceOrientation 手机重力与方向感应
HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能. DeviceOrientation包括两 ...
HTML5+PHP+jQuery手机摇一摇换衣
在上一篇文章中,我们了使用HTML5可以侦听到手机晃动从而实现摇一摇效果.手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等.本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手 ...
javascript检查移动设备是否支持重力方向感应
javascript如何检查移动设备,如手机平台是否支持重力或者方向感应.可以使用html5提供的重力和方向感应接口来判断.html5 中针对高端手机提供了重力感应和重力加速的接口,开发可以利用这个接 ...
php重力传感器,HTML5中如何调用手机重力感应的接口
刚刚过去的一年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个"摇签"的小例子来谈一谈HTML5中如何调 ...
H5监听摇一摇和手机倾斜事件（重力感应）
摇一摇功能(DeviceMotion) 摇一摇功能是很多原生APP都可以实现的功能,如微信中的摇一摇找好友,QQ音乐中的摇一摇换歌等.它们都是利用了手机加速传感器提供的API,当监听到手机加速变化的事 ...
html5 360 重力感应,H5案例分享：html5重力感应事件
html5重力感应事件一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...
android手机重力感应例子
手机重力感应实现简单介绍现在有很多游戏是通过摇晃手机实现的,比如赛车游戏摇骰子游戏迷宫游戏等等 . 今天我用简单的代码为大家介绍一下android 下重力感应的实现方式下面是一个模拟器的屏幕 ...
Android 手机重力感应实现简单介绍
手机重力感应实现简单介绍现在有很多游戏是通过摇晃手机实现的,比如赛车游戏摇骰子游戏迷宫游戏等等 . 今天我用简单的代码为大家介绍一下android 下重力感应的实现方式 ...
linux屏幕旋转后触控不准,手机重力感应失效解决方法不能自动旋转屏幕怎么设置...
如今手机已经成为人们生活中必不可少的一个工具了,在使用过程也常常会遇到各种各样的问题,比如当手机重力感应失效的时候应该怎么解决呢,手机不能自动旋转屏幕要怎么设置,针对这个问题下面就为大家带来最新解决方 ...

HTML5手机重力与方向感应的应用——摇一摇效果

HTML

Javascript

HTML5手机重力与方向感应的应用——摇一摇效果相关推荐

最新文章

热门文章