iOS Safari/WebKit对DeviceMotionEvent的实现

简介: 请先阅读《iOS Safari/WebKit对DeviceOrientationEvent的实现》,本文是姐妹篇。 简单地描述一下区别,后面会更详细对比: DeviceOrientationEvent是获取方向,得到device静止时的绝对值; DeviceMotionEvent是获取移动速度,得到device移动时相对之前某个时间的差值比。

请先阅读《iOS Safari/WebKit对DeviceOrientationEvent的实现》,本文是姐妹篇。

简单地描述一下区别,后面会更详细对比:

DeviceOrientationEvent是获取方向,得到device静止时的绝对值;
DeviceMotionEvent是获取移动速度,得到device移动时相对之前某个时间的差值比。


背景知识:

Apple官方依然只发现一个文档:

https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html

还是没例子的,自己写:https://code.csdn.net/hursing/pagetest/blob/master/devicemotionevent.html

<html>
    <head>
 	   <title>DeviceMotionEvent</title>
	   <meta charset="UTF-8" />
	</head>
	<body>
		<p>x轴加速度:<span id="x">0</span>米每二次方秒</p>
		<p>y轴加速度:<span id="y">0</span>米每二次方秒</p>
		<p>z轴加速度:<span id="z">0</span>米每二次方秒</p>
		<hr />
		<p>x轴加速度(考虑重力加速度):<span id="xg">0</span>米每二次方秒</p>
		<p>y轴加速度(考虑重力加速度):<span id="yg">0</span>米每二次方秒</p>
		<p>z轴加速度(考虑重力加速度):<span id="zg">0</span>米每二次方秒</p>
		<hr />
		<p>左右旋转速度:<span id="alpha">0</span>度每秒</p>
		<p>前后旋转速度:<span id="beta">0</span>度每秒</p>
		<p>扭转速度:<span id="gamma">0</span>度每秒</p>
		<hr />
		<p>上次收到通知的间隔:<span id="interval">0</span>毫秒</p>
		<script type="text/javascript">
		function motionHandler(event) {
			document.getElementById("interval").innerHTML = event.interval;
			var acc = event.acceleration;
			document.getElementById("x").innerHTML = acc.x;
			document.getElementById("y").innerHTML = acc.y;
			document.getElementById("z").innerHTML = acc.z;
			var accGravity = event.accelerationIncludingGravity;
			document.getElementById("xg").innerHTML = accGravity.x;
			document.getElementById("yg").innerHTML = accGravity.y;
			document.getElementById("zg").innerHTML = accGravity.z;
			var rotationRate = event.rotationRate;
			document.getElementById("alpha").innerHTML = rotationRate.alpha;
			document.getElementById("beta").innerHTML = rotationRate.beta;
			document.getElementById("gamma").innerHTML = rotationRate.gamma;
		}
		
		if (window.DeviceMotionEvent) {
		  window.addEventListener("devicemotion", motionHandler, false);
		} else {
		  document.body.innerHTML = "What user agent u r using???";
		}
   	 	</script>
	</body>
</html>
用MobileSafari或UIWebView打开以上网页,可以看到10个数值的实时变化。

(其中左图是把ipad平放在水平桌子上时的数值,右图是快速转动ipad时的数值。从右图可看到,因为表示的是速度,单位是度每秒,所以绝对值可以大于360。)

(点击图片看大图) 

这十个属性分别是:

event.acceleration.x(y,z):x(y,z)轴方向上,设备移动的加速度。请看《iOS Safari/WebKit对DeviceOrientationEvent的实现》中的图示。

event.accelerationIncludingGravity.x(y,z):考虑重力加速度后x(y,z)轴方向上的加速度。因为重力加速度只影响z轴,所以与acceleration的数值相比,x轴和y轴是一样的,z轴相差9.8左右。(绝对数值不相等是因为浮点数精度问题)

旋转速度rotationRate:alpha、beta、gamma的概念与DeviceOrientationEvent一致。区别在于:DeviceOrientationEvent的值是相对于初始状态的差值,只要设备方向不变,怎么动都不会影响数值;DeviceMotionEvent是相对于之前的某个瞬间值的差值时间比,即变化的速度,一旦设备静止则会恢复为0。

event.interval是 距离上次收到回调通知的时间间隔。


相关类的关系图:

和DeviceOrientationEvent的非常类似,只不过因为数据个数太多,用了DeviceMotionData来做数据容器。

执行JavaScript遇到addEventListener时的浏览器堆栈是几乎一样的。在回调通知的区别也就仅在传的参数多了几个。

Thread 5 WebThread, Queue : (null)
#0	0x387bec96 in WebCore::EventTarget::dispatchEvent(WTF::PassRefPtr<WebCore::Event>) ()
#1	0x389a8a50 in WebCore::DeviceMotionController::didChangeDeviceMotion(WebCore::DeviceMotionData*) ()
#2	0x389a83cc in WebCore::DeviceMotionClientIOS::motionChanged(double, double, double, double, double, double, double, double, double) ()
#3	0x38974b0a in __48-[CoreMotionManager sendMotionData:withHeading:]_block_invoke_0 ()

PS:

1. Mac WebKit的类还留在iOS版里冗余着,根本没用,例如WebDeviceOrientation。

2. 需要真机调试,模拟器不支持Core Motion。


转载请注明出处:http://blog.csdn.net/hursing

目录
相关文章
|
5月前
|
Web App开发 移动开发 Android开发
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
|
8月前
|
Web App开发 安全 JavaScript
关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
关于 Safari back 按钮在 iOS 16 不能按照期望工作的问题分析
53 0
|
安全 数据安全/隐私保护 iOS开发
iOS小技能:【发红包】使用tweak和lua脚本结合进行实现
我们开发的大部分越狱程序,都是编译成动态链接库(`例如:介绍的越狱程序(Tweak)开发,就是动态链接库。`),然后通过越狱平台的MobileSubstrate(iOS7上叫CydiaSubstrate)来加载进入目标程序(Target),通过对目标程序的挂钩(Hook),来实现相应的功能。
266 0
|
9月前
|
Web App开发 JavaScript iOS开发
iOS Safari 浏览器 100vh 带有滚动条解决方案
iOS Safari 浏览器 100vh 带有滚动条解决方案
464 0
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
221 0
|
存储 数据处理 iOS开发
iOS开发-本地推送实现方法和数据处理方案(二)
iOS开发-本地推送实现方法和数据处理方案(二)
171 0
|
存储 数据处理 iOS开发
iOS开发-本地推送实现方法和数据处理方案(一)
iOS开发-本地推送实现方法和数据处理方案(一)
212 0
|
iOS开发
iOS开发 - 不通过import引入类名实现push或present
iOS开发 - 不通过import引入类名实现push或present
77 0
|
Android开发 iOS开发
iOS开发 - 商品详情页两种分页模式,只提供思路和实现方式。
iOS开发 - 商品详情页两种分页模式,只提供思路和实现方式。
358 0
iOS开发 - 商品详情页两种分页模式,只提供思路和实现方式。
|
存储 安全 iOS开发
iOS开发 - 继udid,Mac地址等一系列唯一标识无效后,如何用KeyChain来实现设备唯一性
iOS开发 - 继udid,Mac地址等一系列唯一标识无效后,如何用KeyChain来实现设备唯一性
403 0
iOS开发 - 继udid,Mac地址等一系列唯一标识无效后,如何用KeyChain来实现设备唯一性

热门文章

最新文章