刚刚过去的一年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个“摇签”的小例子来谈一谈HTML5中如何调用手机重力感应的接口。
演示代码:摇一摇,万福签
什么是重力感应
说到重力感应有一个东西不得不提,那就是就是陀螺仪,陀螺仪就是内部有一个陀螺,陀螺仪一旦开始旋转,由于轮子的角动量,陀螺仪有抗拒方向改变的特性,它的轴由于陀螺效应始终与初始方向平行,这样就可以通过与初始方向的偏差计算出实际方向。
手机中的方位轴
在Web应用中调用手机陀螺仪接口
//摇一摇(使用DeviceOrientation事件, 本质是计算偏转角) //测试中发现有些设备不支持 if(window.DeviceOrientationEvent){ $(window).on('deviceorientation', function(e) { if (isStarted) { return true; } if (!lastAcc) { lastAcc = e; return true; } var delA = Math.abs(e.alpha - lastAcc.alpha); var delB = Math.abs(e.beta - lastAcc.beta); var delG = Math.abs(e.gamma - lastAcc.gamma); if ( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15)) { start(); } lastAcc = e; });
友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群