实现摇一摇功能 - H5 设备运动事件 DeviceMotionEvent DeviceOrientationEvent

新年不是搞了个摇签的功能吗，弹幕效果咱们前面讲过了，今天来说说摇一摇效果

DEMO

1. 基础 DEMO，摇一摇然后可以看红绿色，有颜色代表触发。

2. 完整 DEMO

   • 摇一摇手机，绿色变为黄色，为分数统计
   • 黄色 + 触发 50 阈值时 ，触发 200ms 震动
   • 黄色 + 触发 100 阈值时 ，触发声音效果

设备方向和运动监听

html 5 提供了一些方法在移动端获得设备方向及运动（因为他是依赖传感器硬件的，pc 没有也不存在抱着台式机跑来跑去场景）。传感器包括陀螺仪、加速器和磁力仪(罗盘)。

可以实现什么效果？

1. VR
2. 刺激战场的陀螺仪微调
3. 我们这里用到的摇一摇

devicemotion

DeviceMotionEvent 在设备发生摆动、运动（手机疯狂摇摆，摇一摇场景）时产生。

devicemotion 是用来监听手机加速度变化的事件回调中可以提供设备的加速度信息。
表示为在设备上定义的坐标系中的笛卡尔坐标，提供了设备在坐标系中的自转速率。

对于一个竖屏摆放的设备来说，设备三个方向轴的位置为：

1. X 方向为从设备的左边(负 -)到右边(正 +)
2. Y 方向为从设备的底部(负 -)到顶部(正 +)
3. Z 方向为垂直于屏幕由设备的背面(负 -)到正面(正 +)。

有 4 个只读属性：属性测试Demo，摇晃小球Demo(加速度)

1. accelerationIncludingGravity：设备在 X,Y,Z 轴方向上带重力的加速度的对象。加速度的单位为 m/s²。重力加速度（包括重心引力）
2. acceleration：设备在 X, Y, Z 轴方向上加速度的对象。加速度的单位为 m/s²。加速度（需要设备陀螺仪支持）
3. rotationRate：设备在 alpha，beta， gamma 轴方向上旋转的速率的对象。旋转速率的单位为 °/s(degrees per seconds) 。旋转速度
4. interval：表示从设备获取数据的频率，单位是毫秒。获取的时间间隔

deviceorientation

DeviceOrientationEvent 加速度传感器检测到设备在方向上产生变化时触发。
监听设备方向（设备旋转和仰角变化的行为），提供设备的物理方向信息，表示为一系列本地坐标系的旋角。

属性有三个，用于描述设备方向：属性测试，摇晃小球Demo(当前设备方向)

1. alpha
2. beta
3. gamma

当手机禁止的时候你会发现他是不动的。拿起移动时就会发现回调开始调用。

摇一摇功能实现

1. devicemotion-demo 我们可以使用 devicemotion 直接来监听设备的运动，当他超过特定的阈值，我们就认为在摇一摇。
   接下来，我们可以摇起来了，可以看到背景色会从绿色变为黄色，然后也有触发阈值的次数的统计。
   

    window.addEventListener('devicemotion', (e) => {
        console.log(e)
        if(this.devicemotionReturn) return ;
        this.historyDevicemotion = JSON.parse(JSON.stringify(this.devicemotion))
   
        this.devicemotion.accelerationIncludingGravity.x = e.accelerationIncludingGravity.x
        this.devicemotion.accelerationIncludingGravity.y = e.accelerationIncludingGravity.y
        this.devicemotion.accelerationIncludingGravity.z = e.accelerationIncludingGravity.z
        if(this.historyDevicemotion.accelerationIncludingGravity.x || 
            this.historyDevicemotion.accelerationIncludingGravity.y || 
            this.historyDevicemotion.accelerationIncludingGravity.z){
            // 计算单一方向加速度的差值
            var thresholdCount = Math.max(
                Math.abs(this.historyDevicemotion.accelerationIncludingGravity.x - e.accelerationIncludingGravity.x),
                Math.abs(this.historyDevicemotion.accelerationIncludingGravity.y - e.accelerationIncludingGravity.y),
                Math.abs(this.historyDevicemotion.accelerationIncludingGravity.z - e.accelerationIncludingGravity.z)   
            )
            // 阈值判断
            if(thresholdCount > 1) this.devicemotion.thresholdCount_1++;
            if(thresholdCount > 5) this.devicemotion.thresholdCount_5++;
            if(thresholdCount > 10) this.devicemotion.thresholdCount_10++;
            if(thresholdCount > 15) this.devicemotion.thresholdCount_15++;
            if(thresholdCount > 20) this.devicemotion.thresholdCount_20++;
            if(thresholdCount > 25) this.devicemotion.thresholdCount_25++;
            if(thresholdCount > 50) this.devicemotion.thresholdCount_50++;
            if(thresholdCount > 100) this.devicemotion.thresholdCount_100++;
   
            // 颜色变化逻辑
            if(thresholdCount > 20) this.devicemotion.shakeValue = Math.min(255, this.devicemotion.shakeValue + 10)
   
        }
    })

2. deviceorientation-demo 我们可以使用 deviceorientation 来监听设备的方向变化，也是设置阈值，超过一定的幅度我们就认为在摇动手机。测试方法同上我就不多介绍了。

震动功能实现

测试地址 Navigator.vibrate() 可以使设备（需硬件支持，手机一般都有响铃并震动功能）产生有频率（可以传入数组）的震动。
若设备不支持震动，该方法将无效。
若某震动方式已经在进行中（当该方法调用时），则前一个震动方式停止，新的取而代之。
若因为提供无效的参数使得无法使设备震动，它将返回false，否则返回true。
若振动方案导致长时间的震动，它会被截断：最大震动时长取决于每个浏览器的具体实现。

navigator.vibrate(duration);

1. window.navigator.vibrate(200); 一个200ms的震动
2. window.navigator.vibrate(0); 停止震动，可以理解为覆盖，然后震动0ms
3. window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); 有频率的震动，奇数位为震动时间，偶数位为暂停时间。我下标按1开始的啊。

声音播放功能实现

声音播放我们就直接使用 audio 标签实现即可，测试地址。复杂一点可以看我之前写的基于better-scroll 实现歌词联动功能。

微信公众号：前端linong

欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。

参考

1. https://developer.mozilla.org/zh-CN/docs/Web/API/Detecting_device_orientation