时间:2021-05-28
通过网上的资料,加上自己的整理,写了一份html摇一摇功能的简介,用做技术备份。
知识要点
1、DeviceMotionEvent
这是html5支持的重力感应事件,关于文档请看:http://w3c.github.io/deviceorientation/spec-source-orientation.html
事件介绍:
deviceorientation提供设备的物理方向信息,表示为一系列本地坐标系的旋角。
devicemotion提供设备的加速信息,表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话,事件应该提供设备重心处的加速信息。
compassneedscalibration用于通知Web站点使用罗盘信息校准上述事件。
2、事件简介
window.addEventListener("deviceorientation",function(event){// 处理event.alpha、event.beta及event.gamma},true);
这是 deviceorientation事件返回的参数,为了获得罗盘指向,可以简单的使用360度减去alpha。若设被平行于水平表面,其罗盘指向为(360 - alpha)。 若用户手持设备,屏幕处于一个垂直平面且屏幕顶端指向上方。beta的值为90,alpha和gamma无关。 用户手持设备,面向alpha角度,屏幕处于一个垂直屏幕,屏幕顶端指向右方,则其方向信息如下
注册一个devicemotion事件的接收器:
复制代码 代码如下:window.addEventListener("devicemotion",function(event){// 处理event.acceleration、event.accelerationIncludingGravity、// event.rotationRate和event.interval},true);
将设备安置于车辆之上,屏幕处于一个垂直平面,顶端向上,面向车辆后部。车辆行驶速度为v,向右侧进行半径为r的转弯。设备记录acceleration 和accelerationIncludingGravity在位置x处的情况,同时设备还会记录rotationRate.gamma的负值:
功能实现
首先判断浏览器是否支持该事件。
YaoYiYao用来检测是否对手机进行摇动操作,具体就是获取手机的的移动数据,将其存在一个外部变量中,当下次又触发摇动事件时,判断上次的摇动坐标 和现在的摇动坐标 是否处于一个频繁调动的范围:Math.abs(x-lastX)> speed ||Math.abs(y-lastY)> speed ||Math.abs(z-lastZ)> speed
基本上 满足这种条件的话,就是手机正处于摇动状态,在if语句里面添加进你要执行的摇一摇代码即可。
以上就是html5摇一摇功能的实现思路,希望对大家的学习有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
要实现摇一摇的功能,类似于微信的摇一摇方法1:通过分析加速计数据来判断是否进行了摇一摇操作(比较复杂)方法2:iOS自带的Shake监控API(非常简单)本文介
手机微信摇一摇怎么用?如何使用微信的摇一摇功能?微信摇一摇受到很多人的喜欢,可以随机交友,那手机微信摇一摇怎么用?如何使用微信的摇一摇功能呢,接下来听听小编
大家应该都发现了这样一种现象,什么功能或者说什么东西火起来之后,别的平台也会效仿。就比如手淘就推出了摇一摇功能。有商家问,手淘摇一摇属于什么渠道?手淘摇一摇是首
手淘摇一摇是手机淘宝中的一个功能,只要拿起手机摇一摇,你就能参各种优惠活动和得到商家优惠券,还能和电视购物发生互动。手淘摇一摇流量怎么进来?下面的内容中进行介绍
1月29日,微信正式开放“摇一摇·周边”功能。这意味着,“摇一摇”除了找朋友、找歌,还将成为连接企业线上、线下流量的重要桥梁。这不止是腾讯实现“连接一切”的重要