A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

事件监听

DeviceMotion,html5提供的新的DOM事件,其提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。

DeviceMotionEvent 会在设备发生有意义的摆动(或运动)时产生.事件对象封装有产生的间距值,旋转率,和设备加速度.
加速度的计算方式是重力和用户产生的两个加速度矢量之和.设备是通过 陀螺仪和加速计来区别这两者的.
通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果。

if ((window.DeviceMotionEvent) {
  window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
  alert("Not supported on your device.")
}
捕捉重力加速度

accelerationIncludingGravity属性返回设备的加速度记录,是由用户引起的设备的加速度和由重力加速度的总和。

是一个包括三轴(x、y、z)加速度信息的对象,每个轴都有自己的属性:

x:表示x轴(西到东)上的加速度

y:表示y轴(南到北)上的加速度

z:表示z轴(下到上)上的加速度

var acceleration = event.accelerationIncludingGravity;
手机震动

在window.navigator对象里就只有一个关于振动的API:vibrate

这个navigator.vibrate函数可以接受一个数字参数,也可以接受一个数字数组,当使用数组参数时,奇数位的数值是震动秒数,偶数位为等待秒数。

// 振动2秒
if (navigator.vibrate) {
    navigator.vibrate(2000);
} else if (navigator.webkitVibrate) {
    navigator.webkitVibrate(2000);
}

// 振动多次
// 参数分别是震动3秒,等待2秒,然后振动1秒
navigator.vibrate([3000, 2000, 1000]);

// 停止振动
navigator.vibrate(0);
navigator.vibrate([]);
实例

if(window.DeviceMotionEvent) {
    var speed = 30;    // 用来判定的加速度阈值,太大了则很难触发
    var x, y, z, lastX, lastY, lastZ;
    x = y = z = lastX = lastY = lastZ = 0;
               
        window.addEventListener('devicemotion', function(event){
                 var acceleration = event.accelerationIncludingGravity;
                 x = acceleration.x;
                 y = acceleration.y;
                 if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed) {
                    if(navigator.vibrate) {
                            navigator.vibrate(500)
                    }
                    alert("摇一摇成功");
                 }
                 lastX = x;
                 lastY = y;
        }, false);
}
测试有效!


1 个回复

正序浏览
奈斯,感谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马