新年不是有抽奖功能吗？我们之前提到过弹幕效果。今天说说摇动效果DEMO基础DEMO，摇一摇然后可以看到红色和绿色，颜色代表触发。完成DEMO摇动手机，绿色变为黄色，统计分数。黄色+触发50阈值时，会触发200ms震动。黄色+触发100阈值时，会触发音效。设备方向和运动监测html5提供了一些获取Device方向和运动的方法（因为它依赖于传感器硬件，PC没有也没有抱着台式电脑跑来跑去的场景）。传感器包括陀螺仪、加速度计和磁力计（罗盘）。可以达到什么效果？VR刺激战场的陀螺仪微调我们这里使用的shakedevicemotionDeviceMotionEvent是在设备摆动或者移动时（手机狂晃，抖动场景）产生的。devicemotion用于监听手机的加速度变化，可以在事件回调中提供设备的加速度信息。在设备上定义的坐标系中表示为笛卡尔坐标，它提供了设备在坐标系中的旋转速率。对于竖屏放置的设备，设备三个轴的位置为：X方向为设备左（负）向右（正+），Y方向为设备底部(negative-)tothetopofthedevice(positive+)Z方向垂直于屏幕从设备的背面(negative-)到正面(positive+)。有4个只读属性：属性testDemo、摇球Demo（加速度）accelerationIncludingGravity：设备在X、Y、Z轴方向的重力加速度对象。加速度的单位是m/s2。重力加速度（包括重心）加速度：设备在X、Y、Z轴方向上加速的物体。加速度的单位是m/s2。加速度（需要设备陀螺仪支持）rotationRate：设备在alpha、beta和gamma轴方向上旋转的速率对象。旋转速率的单位是°/s（度/秒）。转速间隔：表示从设备获取数据的频率，单位为毫秒。获取的时间间隔deviceorientationDeviceOrientationEvent当加速度计检测到设备方向发生变化时触发。监听设备方向（设备旋转和仰角变化的行为），提供设备的物理方向信息，表示为本地坐标系的一系列旋转角度。有3个属性，用来描述设备方向：属性test，摇球Demo（当前设备方向），alphabetagamma，你会发现在手机禁用的时候不动。你会发现当你拿起移动时回调开始调用。shake函数实现devicemotion-demo我们可以使用devicemotion直接监测设备的运动，当它超过特定的阈值时，我们认为它被摇动了。接下来我们可以摇一摇，可以看到背景颜色会从绿色变成黄色，然后统计触发阈值的次数。window.addEventListener('devicemotion',(e)=>{console.log(e)if(this.devicemotionReturn)return;this.historyDe??vicemotion=JSON.parse(JSON.stringify(this.devicemotion))this.devicemotion.accelerationIncludingGravity.x=e.accelerationIncludingGravity.xthis.devicemotion.accelerationIncludingGravity.y=e.accelerationIncludingGravity.ythis.devicemotion.accelerationIncludingGravity.z=e.accelerationIncludingGravity.z如果（this.historyDe??vicemotion.accelerationIncludingGravity.x||this.historyDe??vicemotion.accelerationIncludingGravity。abs(this.historyDe??vicemotion.accelerationIncludingGravity.y-e.accelerationIncludingGravity.y),Math.abs(this.historyDe??vicemotion.accelerationIncludingGravity.z-e.accelerationIncludingGravity.z))//阈值判断if(thresholdCount>1)this.devicemotion.thresholdCount_1++;如果（thresholdCount>5）this.devicemotion.thresholdCount_5++；如果（阈值>10）this.devicemotion.thresholdCount_10++；如果（thresholdCount>15）this.devicemotion.thresholdCount_15++；如果（thresholdCount>20）this.devicemotion.thresholdCount_20++；如果（thresholdCount>25）this.CountholdCount_20++；)this.devicemotion.thresholdCount_50++;如果（thresholdCount>100）this.devicemotion.thresholdCount_100++；//颜色变化逻辑if(thresholdCount>20)this.devicemotion.shakeValue=Math.min(255,this.devicemotion.shakeValue+10)}})deviceorientation-demo我们可以使用deviceorientation来监听设备的方向变化，并且还设置了一个阈值。如果超过一定范围，我们就认为是在晃动手机。测试方法同上。震动功能实现测试地址Navigator.vibrate()可以让设备（需要硬件支持，手机一般都有响铃震动功能）产生带频率的震动（可以传入数组）。如果设备不支持振动，此方法将不起作用。如果振动方法已经在进行中（调用此方法时），则先前的振动方法将停止，新的振动方法将取而代之。如果设备因为提供了无效参数而无法振动，它将返回false，否则返回true。如果振动方案导致振动过长，则会被截断：最大振动持续时间取决于每个浏览器的具体实现。navigator.vibrate（持续时间）；window.navigator.vibrate（200）；一个200ms的振动window.navigator.vibrate(0);停止振动，可以理解为覆盖，然后振动0mswindow.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]);振动频率，奇数位为振动时间，偶数位为停顿时间。我开始下标了1.声音播放功能要实现声音播放，我们可以直接使用audio标签来实现，测试地址。如果比较复杂，可以看我之前写的基于better-scroll的歌词联动功能。微信公众号：前端立农欢迎大家关注我的公众号。有问题也可以加我的微信前端交流群。参考https://developer.mozilla.org/zh-CN/docs/Web/API/Detecting_device_orientation
