北大青鸟课工场
北大青鸟课工场 全国统一咨询热线:400-8869355
 首页  »    资讯   »    内容

HTML5中如何调用手机重力感应的接口

    黎浔的个人博客     2017-01-10     4470浏览

去年朋友圈爆发各种各样的H5动画效果,这些基于H5的页面通过朋友圈迅速形成病毒式传播效果,本文通过讲解”摇签“案例,帮我们细细分析了HTML5中如何调用手机重力感应的接口。

      刚刚过去的一年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个“摇签”的小例子来谈一谈HTML5中如何调用手机重力感应的接口。

什么是重力感应

       说到重力感应有一个东西不得不提,那就是就是陀螺仪,陀螺仪就是内部有一个陀螺,陀螺仪一旦开始旋转,由于轮子的角动量,陀螺仪有抗拒方向改变的特性,它的轴由于陀螺效应始终与初始方向平行,这样就可以通过与初始方向的偏差计算出实际方向。

112400yfbfsnfjjns58j15.jpg



手机中的方位轴

在Web应用中调用手机陀螺仪接口

//摇一摇(使用DeviceOrientation事件, 本质是计算偏转角)
02//测试中发现有些设备不支持
03if(window.DeviceOrientationEvent){
04    $(window).on('deviceorientation'function(e) {
05        if (isStarted) {
06            return true;
07        }
08        if (!lastAcc) {
09            lastAcc = e;
10            return true;
11        }
12        var delA = Math.abs(e.alpha - lastAcc.alpha);
13        var delB = Math.abs(e.beta - lastAcc.beta);

<tr style="word-wrap: break-word; margin: 0px !important; padding: 0px !important; border: 0px !important; outline: 0px !important; float: none !important; vertical-align: baseline !important; position: static !import



我要分享:

 相关阅读

咨询专栏

学费低到不能说,薪资高到没朋友!你离高薪只差一个电话的距离。
QQ群:263965166
电话:400-8869355

咨询在线老师
课工场报名 预约免费试听