他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)HTML5 重力感应 实现手机摇一摇-HTML5学堂
您当前位于： ——> HTML5 重力感应 实现手机摇一摇
HTML5 重力感应 实现手机摇一摇
作者：HTML5学堂（码匠）
关键词：HTML5,硬件调用,重力感应,摇一摇
HTML5 实现手机摇一摇
HTML5新增了一些JavaScript API接口，比如地理定位、重力感应等。今天主要介绍devicemotion事件（设备事件），它提供设备的加速信息，表示为定义在设备上的坐标系。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。本文给大家讲解了HTML5实现手机摇一摇的效果。
欢迎沟通交流~
手机摇一摇的实现思路：
1、检测设备是否支持重力传感；
// 监听运动传感事件，查看是否支持硬件运动
if (window.DeviceMotionEvent) {
&&&&alert(&您的设备支持硬件调用&);
&&&&alert(&您的设备不支持硬件调用&);
2、绑定运动传感（devimotion）事件；
window.addEventListener('devicemotion', deviceMotionHandler, false);
3、根据devimotion事件对象，获取三个方向的重力加速度；
* [deviceMotionHandler 摇一摇处理函数]
* @param {[type]} eventData [事件对象]
* @return {[type]} [无返回值]
* @author 刘国利、陈能堡、HTML5学堂
function deviceMotionHandler(eventData){
&&&&// acceleration加速度
&&&&var acceleration = eventData.accelerationIncludingG
&&&&$(&.wrap&)[0].innerHTML = acceleration.x + & & + acceleration.y + & & + acceleration.z;
4、为了防止系统认为简单的变化也是在摇动手机，所以在每隔一段时间进行三个方向值的计算；
// 获取当前时间
curTime = new Date().getTime();
if (curTime - lastTime & 100) {
&&&&// 计算出时间断
&&&&diffTime = curTime - lastT
&&&&// 记录上一次的时间
&&&&lastTime = curT
&&&&// 获取当前的三个方向的值
&&&&x = acceleration.x;
&&&&y = acceleration.y;
&&&&z = acceleration.z;
&&&&// 计算速度，为了防止出现负数，进行绝对值
&&&&speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 10000);
&&&&// 记录上一次三个方向的值
&&&&lastX =
&&&&lastY =
&&&&lastZ =
5、当计算的该值大于预定的值（阀值），执行相应的操作。
if (speed & SHAKE_THRESHOLD) {
&&&&alert(&实现了摇一摇&);
图片来源于网络
完整的实例
var con = document.getElementById(&con&);
(function(){
&&&&// 监听运动传感事件，查看是否支持硬件运动
&&&&if (window.DeviceMotionEvent) {
&&&&&&&&window.addEventListener('devicemotion', deviceMotionHandler, false);
&&&&} else {
&&&&&&&&alert(&您的设备不支持硬件调用&);
&&&&// 变量初始化
&&&&var x = 0,
&&&& y = 0,
&&&& z = 0,
&&&&lastX = 0,
&&&&lastY = 0,
&&&&lastZ = 0,
curTime = 0,
lastTime = 0,
diffTime = 0,
&&&&speed = 0;
&&&&// 设置一个阀值
&&&&var SHAKE_THRESHOLD = 800; // 设定摇晃的阈值为600 运行相应操作
&&&& * 功能：测算三个方向重力加速度，达到一定值进行相应操作
&&&& * 作者：HTML5学堂、刘国利、陈能堡
&&&&function deviceMotionHandler(eventData){
&&&&&&&&var acceleration = eventData.accelerationIncludingG
&&&&&&&&// 获取当前时间
&&&&&&&&curTime = new Date().getTime();
&&&&&&&&// 计算时间差，当这个差值大于一定值执行计算三个方向的速度
&&&&&&&&if ((curTime - lastTime) & 100) {
&&&&&&&&&&&&// 记录上一次的时间
&&&&&&&&&&&&diffTime = curTime - lastT
&&&&&&&&&&&&lastTime = curT
&&&&&&&&&&&&// 获取当前三个方向的值
&&&&&&&&&&&&x = acceleration.x;
&&&&&&&&&&&&y = acceleration.y;
&&&&&&&&&&&&z = acceleration.z;
&&&&&&&&&&&&// 计算速度，为了防止出现负数，进行绝对值
&&&&&&&&&&&&speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000);
&&&&&&&&&&&&if (speed & SHAKE_THRESHOLD) {
&&&&&&&&&&&&&&&&alert(&我实现摇一摇了&);
&&&&&&&&&&&&};
&&&&&&&&&&&&// 记录上一次三个方向的值
&&&&&&&&&&&&lastX =
&&&&&&&&&&&&lastY =
&&&&&&&&&&&&lastZ =&&&&&&&&&&&&&&&&&&&&
&&&&&&&&};
欢迎沟通交流~
阅读：1974
《HTML5布局之路》资源下载
你可能感兴趣的文章
HTML5学堂（码匠）创始人
Copyright (C)
黑白任你选：“重力感应”广受好评，易企秀再刷新H5创新力“重力感应”广受好评，易企秀再刷新H5创新力易企秀百家号随着H5技术在营销领域内的广泛应用，一批像《杜蕾斯美术馆》、《天猫淘宝邀请函》、《穿越故宫来看你》等优秀作品频繁在朋友圈刷屏。在这些优秀作品中，我们也不难发现：重力感应让H5玩出了更多元的创意。而H5营销工具易企秀，除了致力于运用html5技术，0代码产生H5场景，0设计产生营销素方面外，在功能迭代方面，“重力感应”近日也在易企秀平台全新上线。添加了重力感应的H5，往往需要旋转手机才能看到全幅场景，方便隐藏元素或展示复杂细节，所以很适合用在寻宝冒险类、微观展示类的H5。在易企秀编辑器内，一键开启重力感应后，转动手机，背景图片会跟随移动。该功能上线后，一个个互动性趣味性十足的易企秀场景，不知让多少小伙伴拿起手机，转来转去投入到H5的情景中去。这种技术去年还只是局部的滑屏体验，今年已经进步到整体运动体验，看似微小的变化，却给H5带来更多可能。以易企秀刚刚落下帷幕的小狗电器吸尘器H5大赛为例，获奖作品《紧急任务：大圣的求助》就将重力感应运用得淋漓尽致。在寻宝画面展现时，音效与画面使用了相对宁静的视听效果，从激情彭拜的视听感中牵引至宁静的森林乐曲，让用户能舒心使用重力感应去寻找宝箱，让用户体验到重力感应寻宝的乐趣。打开宝箱后，展现出了小狗吸尘器的5个特殊零件，点击音效能够让用户体验到参与感，自我的潜力提升，会继而跟随剧情的指引去操作。因为用户从开始到强化这一部分，都不知道此H5游戏再演示着什么，最终目的在于什么，凭借着好奇心与自我参与感走向最后。在收集零件完整后，强化的节点时，才明白整套H5宣传一款小狗产品。这时需要强化金箍棒，这个节点有一个互动操作，用户更乐意去自行点击。整体完结后，引出小狗电器二维码与产品售卖价格，整个H5让用户无需多想，引导一步一步走向最终节点。在“强化金箍棒”的操作时会有相应的操作音效，也提升了整个H5的质感大赛组委会点评：有限的产品功能，无限的秀客想象力，打造超级酷炫的H5 场景。值得一提的是，与“重力感应”一同上线，给用户带来全新体验的功能还有渐变、悬挂掉落、砸玻璃等。打造日趋完整的H5体系，易企秀还会玩出什么新花样，笔者和你一起，骑驴看账本，走着瞧。本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。易企秀百家号最近更新：简介:为中小企业提供一站式自主营销及管理服务作者最新文章相关文章HTML5中如何调用手机重力感应的接口 - 简书
HTML5中如何调用手机重力感应的接口
刚刚过去的一年里基于微信的H5营销可谓是十分火爆，通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧，刚好最近农历新年将至，我就拿一个“摇签”的小例子来谈一谈中如何调用手机重力感应的接口。代码：什么是重力感应说到重力感应有一个东西不得不提，那就是就是陀螺仪，陀螺仪就是内部有一个陀螺，陀螺仪一旦开始旋转，由于轮子的角动量，陀螺仪有抗拒方向改变的特性，它的轴由于陀螺效应始终与初始方向平行，这样就可以通过与初始方向的偏差计算出实际方向。
手机中的方位轴在Web中调用手机陀螺仪接口//摇一摇(使用DeviceOrientation事件, 本质是计算偏转角)//测试中发现有些设备不支持if(window.DeviceOrientationEvent){$(window).on('deviceorientation',function(e) {if(isStarted) {}if(!lastAcc) {lastAcc =}vardelA = Math.abs(e.alpha - lastAcc.alpha);vardelB = Math.abs(e.beta - lastAcc.beta);vardelG = Math.abs(e.gamma - lastAcc.gamma);if( (delA & 15 && delB & 15) || (delA & 15 && delG & 15) || (delB & 15 || delG & 15)) {start();}lastAcc =});//摇一摇(使用DeviceMotion事件, 推荐,应为可以计算加速度)if(window.DeviceMotionEvent) {varspeed = 25;varx, y, z, lastX, lastY, lastZ;x = y = z = lastX = lastY = lastZ = 0;window.addEventListener('devicemotion',function(event){varacceleration = event.accelerationIncludingGx = acceleration.x;y = acceleration.y;if(Math.abs(x-lastX) & speed || Math.abs(y-lastY) & speed) {start();}lastX =lastY =}, false);}摇一摇的代码判断逻辑varisStarted =// 开始摇签functionstart() {isStarted =$('.qiancover').hide();$('.decode').hide();$('.result').show();// setTimeout(showDecode, 3000);}// 显示正在解签functionshowDecode() {$('.result').hide();$('.decode').show();setTimeout(jumpToDecode, 3000);}// 跳至签文页面functionjumpToDecode(){varurls = ["#","#"];varjumpTo = urls[parseInt(Math.random() * urls.length)];window.location = jumpTo;};示例代码： https://github.com/lionrock/HTML5-Example/tree/master/wechat-divination参考文档： DeviceOrientation Event Specification来源：http://xunli.xyz//html5-device-shake/?utm_source=tuicool&utm_medium=referral
cs.AI - 人工智能cs.CL - 计算与语言cs.CR - 加密与安全cs.CV - 机器视觉与模式识别cs.CY - 计算与社会cs.DC - 分布式、并行与集群计算cs.DS - 数据结构与算法cs.HC - 人机接口cs.IR - 信息检索cs.IT - 信息论...
astro-ph.IM - 仪器仪表和天体物理学方法cs.AI - 人工智能cs.CL - 计算与语言cs.CR - 加密与安全cs.CV - 机器视觉与模式识别cs.CY - 计算与社会cs.DB - 数据库cs.DS - 数据结构与算法cs.IR - 信息检索cs.IT...
cs.AI - 人工智能cs.CL - 计算与语言cs.CR - 加密与安全cs.CV - 机器视觉与模式识别cs.CY - 计算与社会cs.DC - 分布式、并行与集群计算cs.DS - 数据结构与算法cs.GT - 计算机科学与博弈论cs.IR - 信息检索cs.IT ...
Why Stock Markets CrashThis page intentionally left blankWhy Stock Markets CrashCritical Events in ComplexFinancial SystemsD i d i e r S ...
cs.AI - 人工智能cs.AR - 硬件体系结构cs.CL - 计算与语言cs.CR - 加密与安全cs.CV - 机器视觉与模式识别cs.CY - 计算与社会cs.DC - 分布式、并行与集群计算cs.DS - 数据结构与算法cs.IR - 信息检索cs.IT - 信...
之前的第一问以后，一直没有进行第二问。整整间隔了一周，汗颜。 有兄弟问我，那车后实体门店（以下简称&门店&）的方向到底在哪儿？ 与其说方向这么模糊的问题，还不如我们一起把门店的问题一个个拎出来，不一定一次搞到真理，至少脱脱水。 首先，我们得承认汽车后门店经营的难度。 现在部...
除了自荐，日报也接受专题主编的推荐，快去找你的专题主编推荐自己的文章吧~点击文章标题可以阅读全文，点击作者名字可以进入作者首页~ 想法·我们满足感止步的地方 作者：Madman92 这些年我慢慢的发现，往往那些经常在朋友圈高调的晒自己要干什么事情的人，最后往往什么都干不成，...
1、人们希望按照自己的意愿去控制他人，而且如果对方不能满足自己，也就是如果不能掌控对方的话，就有烦躁不安和愤怒的情绪产生！ 2、从心理学的角度去看，对自己抱有各种怨恨与不满的人很难再去爱别人，更进一步说，不爱自己的人通常希望通过批评和指责他人去平衡自己，不幸的是，这种行为一...
1.重新学习本次课的视频内容，完成《面朝大海春暖花开》的背诵。 面朝大海，春暖花开 从明天起，做一个幸福的人 喂马、劈柴，周游世界 从明天起，关心粮食和蔬菜 我有一所房子，面朝大海，春暖花开 从明天起，和每一个亲人通信 告诉他们我的幸福 那幸福的闪电告诉我的 我将告诉每一个...H5之重力感应篇
时间： 21:19:40
&&&& 阅读：164
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&
手机的重力感应支持里，有两个主要的事件：
1. OrientationChange (在屏幕发生翻转的时候触发)
2. DeviceOrientation+DeviceMotion(重力感应与陀螺仪)
重力感应，基本上是平板电脑和智能手机的标准配置，起到的作用也很简单，比如你玩赛车游戏，控制左右转弯，屏幕横屏和竖屏切换，都需要用到重力感应模块。
而陀螺仪，又叫角速度传感器，用于测量物理量的偏转、倾斜是的动作角速度。可以精确的分析判断出使用者的实际动作，通过他收集的这些动作给手机下达一些指令。
OrientationChange
手机竖屏状态
通过OrientationChange可以获知手机的横竖屏状态，让横屏的页面通过这个事件来弹出告知用户横屏的提示。当然，当用户锁定了屏幕旋转功能，就没办法触发了（心塞）。
DeviceOrientation && DeviceMotion
DeviceOrientation
移动的角度
DeviceMotion
移动的加速度信息
如表格所知，我们可以通过重力感应得知用户手机移动的角度。
基于此，我们可以通过判断用户的设备移动角度实现视觉的错层移动效果，这是一个隐藏的交互形式，悄悄地丰富了页面的效果，也让页面的元素有更好的设计感。
如果想快速实现这个效果，这里给前端推荐一个开源的组件Parallax.JS
http://matthew.wagerfield.com/parallax/
除了移动的错层，我们也可以用手机移动的方向去制作游戏，比如控制车辆移动的方向等。 除了移动角度的获知以外，有陀螺仪的设备，我们还可以利用DeviceMotion获知手机移动加速度，从而模拟出类似摇一摇的功能。
页面结合摇一摇的交互，把需要揭晓的内容神秘地包装了起来，很好地引起用户的好奇心以及产品的悬念感（这里要对没有陀螺仪的设备进行判断，把交互形式由摇一摇改成滑动屏幕）
目前越来越多的设备自带陀螺仪，未来相信还会得到更多的设备支持，出现更多的结合重力感应的创意专题。
还是老规矩，看几类运用了重力感应的H5
1转动手机代替鼠标拖拽
一套理想家居的自我修养
我们平常见到的页面之间的切换多是下滑，上拉，左右滑，而这个H5的创意之处在于，用户要通过左右倾斜手机来切换不同的场景。在用户左右倾斜手机过程中，主要有四个场景会呈现出来，分别是：区位，园林，配套和户型。这就是一个典型的通过获知用户手机移动的角度来控制视野的案例
2纠正手机平衡
三步帮你摆脱朋友圈
这是大众点评的一个拯救网瘾青年的案例，在技术实现上也用了重力感应，你必须把手机放在水平的桌子上，否则游戏没法进行下去，在60秒内，如果你触碰了手机屏幕，屏幕也会结束。所以你只好等60秒过去，静静得享受60秒没有手机的时间
3重力感应游戏
拯救自在橙
在这个H5中，主要想宣传的核心点是罕见的6安全气囊，所以在这个小游戏中，设计者利用H5的陀螺仪技术，以橙子和安全气囊为游戏元素实现互动，橙子出现后利用重力感应左右晃动手机，橙子便向相应的方向运动，碰到安全气囊会弹起，连续碰到几个安全气囊将橙子送出顶部就算成功。
赛车游戏同样也可使用重力感应技术
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：http://www.cnblogs.com/susanws/p/5506166.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！