请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 668|回复: 8

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

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-19 22:59:28 | 显示全部楼层 |阅读模式
刚刚过去的一年里基于微信的H5营销可谓是十分火爆,通过转发朋友圈带来的病毒式传播效果相信大家都不太陌生吧,刚好最近农历新年将至,我就拿一个“摇签”的小例子来谈一谈[color=#444444 !important]HTML5中如何调用手机重力感应的接口。
  [color=#444444 !important]演示代码:摇一摇,万福签
  什么是重力感应
  说到重力感应有一个东西不得不提,那就是就是陀螺仪,陀螺仪就是内部有一个陀螺,陀螺仪一旦开始旋转,由于轮子的角动量,陀螺仪有抗拒方向改变的特性,它的轴由于陀螺效应始终与初始方向平行,这样就可以通过与初始方向的偏差计算出实际方向。

  手机中的方位轴
  在Web[color=#444444 !important]应用中调用手机陀螺仪接口
01
//摇一摇(使用DeviceOrientation事件, 本质是计算偏转角)

02
//测试中发现有些设备不支持

03
if(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);

14
        var delG = Math.abs(e.gamma - lastAcc.gamma);

15
        if ( (delA > 15 && delB > 15) || (delA > 15 && delG > 15) || (delB > 15 || delG > 15)) {

16
            start();

17
        }

18
        lastAcc = e;

19
    });




01
<font size="3">//摇一摇(使用DeviceMotion事件, 推荐,应为可以计算加速度)

02
if(window.DeviceMotionEvent) {

03
    var speed = 25;

04
    var x, y, z, lastX, lastY, lastZ;

05
    x = y = z = lastX = lastY = lastZ = 0;

06

07
    window.addEventListener('devicemotion', function(event){

08
        var acceleration = event.accelerationIncludingGravity;

09
        x = acceleration.x;

10
        y = acceleration.y;

11
        if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {

12
            start();

13
        }

14
        lastX = x;

15
        lastY = y;

16
    }, false);

17
}<br></font>




  摇一摇的代码判断逻辑
01
var isStarted = false;

02

03
// 开始摇签

04
function start() {

05
    isStarted = true;

06
    $('.qiancover').hide();

07
    $('.decode').hide();

08
    $('.result').show();

09
    // setTimeout(showDecode, 3000);

10
}

11

12
// 显示正在解签

13
function showDecode() {

14
    $('.result').hide();

15
    $('.decode').show();

16
    setTimeout(jumpToDecode, 3000);

17
}

18

19
// 跳至签文页面

20
function jumpToDecode(){

21
    var urls = ["#", "#"];

22
    var jumpTo = urls[parseInt(Math.random() * urls.length)];

23
    window.location = jumpTo;

24
};




  参考文档: DeviceOrientation Event Specification
回复

使用道具 举报

0

主题

1139

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2016-6-5 11:04:51 | 显示全部楼层
好啊楼主,没想到啊,太好了
回复 支持 反对

使用道具 举报

7

主题

1111

帖子

65

积分

注册会员

Rank: 2

积分
65
发表于 2016-8-8 11:26:22 | 显示全部楼层
请问大家有什么看法?我绝对喜欢这个帖子
回复 支持 反对

使用道具 举报

4

主题

1309

帖子

195

积分

注册会员

Rank: 2

积分
195
发表于 2017-6-27 13:32:44 | 显示全部楼层
抱走~老好人
回复 支持 反对

使用道具 举报

0

主题

1162

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2017-8-30 17:40:07 | 显示全部楼层
写的不错,支持一下哟
回复 支持 反对

使用道具 举报

1

主题

1161

帖子

20

积分

注册会员

Rank: 2

积分
20
发表于 2017-12-2 11:14:37 | 显示全部楼层
好东西一定要看看!
回复 支持 反对

使用道具 举报

0

主题

1162

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2018-3-3 19:16:09 | 显示全部楼层
佩服你,能发这么好的帖子,厉害
回复 支持 反对

使用道具 举报

0

主题

1136

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2019-5-30 12:15:11 | 显示全部楼层
有些不是太明白,研究研究再说
回复 支持 反对

使用道具 举报

2

主题

1215

帖子

83

积分

注册会员

Rank: 2

积分
83
发表于 2019-7-1 10:49:29 | 显示全部楼层
这个资料非常不错,好东东!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2019-7-18 12:56 , Processed in 0.248189 second(s), 33 queries .

快速回复 返回顶部 返回列表