js实现手机摇一摇以及震动功能

事件监听

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);
}

测试有效！

作者：Li_na_na01
来源：CSDN
原文：https://blog.csdn.net/Li_na_na01/article/details/87809093
版权声明：本文为博主原创文章，转载请附上博文链接！

js实现手机摇一摇以及震动功能相关推荐

Android之手机摇一摇震动刷新（支持ListView、GridView、WebView）并生成我的二维码
手机摇一摇震动刷新第一步:看摇一摇震动刷新的前后的效果图 1.摇一摇震动刷新前的效果图如下(图片太大了,分2次录屏的,如果看着不爽请猛戳我的github上面的演示) 2.摇一摇震动刷新之后的效果图如 ...
iOS oc 手机摇一摇震动带音效功能
导入 #import <QuartzCore/QuartzCore.h> #import <AudioToolbox/AudioToolbox.h> 核心代码 - (void) ...
js 侦听手机摇动事件，模仿微信摇一摇功能
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...
Unity手机摇一摇
2019独角兽企业重金招聘Python工程师标准>>> 项目中遇到手机摇一摇功能边整理下: using UnityEngine; using System.Collections;p ...
HTML5+PHP+jQuery手机摇一摇换衣
在上一篇文章中,我们了使用HTML5可以侦听到手机晃动从而实现摇一摇效果.手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等.本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手 ...
HTML5手机重力与方向感应的应用——摇一摇效果
HTML5有一个重要特性:DeviceOrientation,它将底层的方向和运动传感器进行了高级封装,它使我们能够很容易的实现重力感应.指南针等有趣的功能.本文将结合实例给大家介绍使用HTML5的重 ...
手机摇一摇功能音量大小跟系统音量一致
源代码免费下载布局文文件:main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLa ...
php微信摇一摇,怎样使用JS+H5实现微信摇一摇
这次给大家带来怎样使用JS+H5实现微信摇一摇,使用JS+H5实现微信摇一摇的注意事项有哪些,下面就是实战案例,一起来看一下. 项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动 ...
Android手机摇一摇功能的简单实现
我需要做一个Android摇一摇的功能,网上我看了很多教程,都写的大同小异,很多了,最近慕课网上也有关于开发摇一摇教程的视屏,讲的很详细,可惜中间视屏少了两节! SensorManager :获取传感 ...
微信摇一摇插件ios_iOS摇一摇手机，播放微信摇一摇音效
实现微信摇一摇播放音效,代码如下: - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event { if (motion ...

js实现手机摇一摇以及震动功能

测试有效！

js实现手机摇一摇以及震动功能相关推荐

最新文章

热门文章