摇一摇”的效果制作主要依赖于H5的deviceMotionEvent事件

先讲怎么使用,具体的原理在后边补充

第一步:捕捉重力加速度

var acceleration = eventData.accelerationIncludingGravity;

第二步:监听函数并执行、

var SHAKE_THRESHOLD = 800;
var last_update = 0;
var x, y, z, last_x, last_y, last_z; if ((window.DeviceMotionEvent) {
window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
document.getElementById("dmEvent").innerHTML = "Not supported on your device."
} function deviceMotionHandler(eventData) {
var acceleration =eventData.accelerationIncludingGravity;
var curTime = new Date().getTime();
if ((curTime - last_update)> 300) {
var diffTime = curTime -last_update;
last_update = curTime;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
var speed = Math.abs(x +y + z - last_x - last_y - last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD) {
alert("shaked!");
        //处理摇一摇事件触发后的函数
}
last_x = x;
last_y = y;
last_z = z;
}
}

至于当前事件的兼容性可以查询:http://caniuse.mojijs.com/Home/Html/item/key/deviceorientation/index.html

关于devicemotion

html5提供了几个新的DOM事件来获得设备物理方向及运动的信息,包括:陀螺仪、罗盘及加速计。

第一个DOM事件是**deviceorientation**,其提供设备的物理方向信息,表示为一系列本地坐标系的旋角。
第二个DOM事件是**devicemotion**,其提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。
第三个DOM事件是**compassneedscalibration**,其用于通知Web站点使用罗盘信息校准上述事件。

原理

开发者从各个内置传感器那里获取未经修改的传感数据,并观测或响应设备各种运动和角度变化。这些传感器包括陀螺仪、加速器和磁力仪(罗盘)。
加速器和陀螺仪的数据都是描述沿着iOS设备三个方向轴上的位置,对于一个竖屏摆放的iPhone来说,X方向从设备的左边(负)到右边(正),Y方向则是由设备的底部(-)到顶部(+),而Z方向为垂直于屏幕由设备的背面(-)到正面(+)。

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

H5 DeviceMotionEvent 事件制作“摇一摇效果”的更多相关文章

  1. h5手机摇一摇功能实现:基于html5重力感应DeviceMotionEvent事件监听手机摇晃

    DeviceMotionEven是html5提供的一个用来获取设备物理方向及运动的信息(比如陀螺仪.罗盘及加速计)的Dom事件,事件描述如下: deviceorientation:提供设备的物理方向信 ...

  2. js摇一摇事件

    今早同事过来说.要做个小游戏.里面有个摇一摇动作. 平时都是做的手机营销h5比较少.  发现很有意思.  一时间没有反应过来. 怎么实现的摇一摇. 现在吧代码叠出来给2货的我. //运动事件监听if ...

  3. HTML5实现“摇一摇”效果

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  4. H5+JS实现手机摇一摇功能

    在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备 ...

  5. H5进阶篇--实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  6. H5实现摇一摇技术总结

    摇一摇遇到的问题 一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入 ...

  7. H5摇一摇遇到的问题

    一.如何对摇晃效果进行反馈 刚开始的处理方式是,摇晃过程中不做任何处理,但后来反馈说这种效果不好,好像就没有摇动一样,如果声音也不响的话,就真的和什么都没发生一样. 后来想了想,加入摇晃过程动画,就像 ...

  8. 手机摇一摇效果-html5

    1.手机摇一摇效果实现 2.播放声音 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  9. Android摇一摇振动效果Demo

    前言     在微信刚流行的时候,在摇一摇还能用来那啥的时候,我也曾深更半夜的拿着手机晃一晃.当时想的最多的就是.我靠,为神马摇一下须要用这么大的力度,当时我想可能腾讯认为那是个人性的设计.后来才发觉 ...

随机推荐

  1. Vue.extend提供自定义组件的构造器

    Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...

  2. final、finally、finalize的用法

    final: 1.被final修饰的类,就意味着不能再派生出新的子类,不能作为父类而被子类继承 2.将变量或方法声明为final,可以保证他们在使用的过程中不被修改. 3.被final声明的方法也同样 ...

  3. QT使用QJson生成解析Json数据的方法

    QT中使用json还是比较方便的,下面用例子直接说明 举例子之前首先推荐一个在线解析json格式的网站,具体格式用法如下图所示: 之后根据这个格式进行json数据解析. QT使用json需要包含的头文 ...

  4. android 利用CountDownTimer实现时分秒倒计时效果

    https://blog.csdn.net/mrzhao_perfectcode/article/details/81289578

  5. ros 充电topic

    #!/usr/bin/env python #coding=utf- import rospy from std_msgs.msg import String i= def talker(): glo ...

  6. jmeter3.2 版本完美实现Load Test报表

    今天下载了最新版的apache tomcat jmeter 3.2,需要jdk1.8以上的版本. 用非GUI模式运行压力测试后,出现的报表太完美了. 将jmx脚本放在就jmeter_home/bin下 ...

  7. SHA-256 加密原理

    网络中传输敏感信息的时候通常会对字符串做加密解密处理 SHA-256 加密原理

  8. idea使用教程(2)

    目录: 1. open和import的区别 2.修改虚拟机配置信息 3.安装目录和设置目录 1. open和import的区别 open:如果本身就是idea项目,则可以直接open打开; impor ...

  9. linux 环境下如何完全卸载postgres

    完全删除postgres 小笔记: 1.查看版本号和系统类别:cat  /etc/redhat-realease; 2.如果是redhat:(yum install) a.yum 删除软件包: yum ...

  10. cmd中mvn命令,出现No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?

    在cmd里执行mvn命令,出错 查看mvn -v 发现mvn运行在jre上,更改高级设置.我的电脑-->属性-->高级系统设置-->环境变量 更改完之后,再次查看 mvn -v 搞定 ...