iOS Safari/WebKit对DeviceMotionEvent的实现

请先阅读《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

时间: 2025-01-28 12:47:39

iOS Safari/WebKit对DeviceMotionEvent的实现的相关文章

iOS Safari/WebKit对DeviceOrientationEvent的实现

背景知识: Apple官方只发现一个文档: https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/DeviceOrientationEvent/DeviceOrientationEvent.html 连个例子都没有,还是自己实践吧.https://code.csdn.net/hursing/pagetest/blob

iOS Safari阅读模式分析过程

本文为Safari阅读模式分析过程记录,没有做很好的整理.最终的输出见另一篇iOS Safari阅读模式研究. 1. Break on evaluate   b JSC::evaluate(JSC::ExecState*, JSC::ScopeChainNode*, JSC::SourceCode const&, JSC::JSValue, JSC::JSValue*)   dump the source content from JSC::SourceCode Printing descrip

在线等,ios safari 打开网页白屏

问题描述 在线等,ios safari 打开网页白屏 在线等.http://www.dytj.com/pcebweb/PublicShare.do?ParentShareCode=6f655e7fba56a19040f2b9930204a117&adTemplateSeq=17&r=0.09126012772321701这是公司的分享到微信中的一个链接,打开经常出现白屏,想问下苹果对网页会有什么控制没?白屏不显示是网页的问题吗? 解决方案 本人打开多次,没有发现楼主说的白屏现象,可能是网络

iOS Safari和UIWebView对orientationchange事件的实现

背景知识: Safari Web Content Guide中关于orientationchange的文档: http://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW16 这里用addEventListener来实现:htt

iOS Safari支持浏览器内方向感应

日前有移动http://www.aliyun.com/zixun/aggregation/6434.html">软件开发者发现,虽然苹果从未宣传过这一功能,但实际上在上月底iOS 4.2升级后,iPhone.iPad.iPod touch上的Safari浏览器已经对一系列HTML5和W3C新标准提供了支持,其中最引人注目的要数浏览器内持握方向识别.该技术名为DeviceOrientation API,目前正处在W3C草案标准的阶段.通过这一编程接口,网页能够利用手机的加速度计.陀螺仪.电子

iOS Safari阅读模式研究

这是一篇在2013年准备的资料,现在分享出来,供有需要的同学参考. 要点 (1) 阅读模式的检测 在frame加载完成后,触发一个timer来检测是否可以使用阅读模式.检测的方式是使用JavaScriptCore framework的接口执行一段JS脚本,然后取JS中属性值来判断是否可以进入阅读模式.如果当前页面可以进入阅读模式,将在地址栏显示阅读模式切换按钮. (2) 阅读模式的执行 当用户点击阅读模式切换按钮时,会依次执行: i. 执行阅读模式检查脚本,判断目前是否可以进入阅读模式. ii.

iOS9中的WebKit 与 Safari带来的惊喜_IOS

每个用过 UIWebView 的iOS开发者对其诸多的限制和有限的功能也深有感触.悻然,自iOS8推出 WebKit 框架后将改变这一窘境.在本文我将会深入WebKit来体验一下它给我们带来的好处,同时也看看在iOS9中新加入的 SFSafariViewController 有些什么新的惊喜. 通用的浏览行为 所谓的通用浏览行为主要可以归纳为以下的几种: 网页载入进度 前进 后退 刷新 如果每个用到 WebView 的 app都要做一个专用的Controller也挺麻烦的,我以前就直接采用其它第

谈谈iOS的Safari和UIWebView

打开iOS4.3上的iPad Safari,再跟iOS6.1上的对比,也许你会觉得4.3没有标签栏,不够好用,但那个多窗口的设计却又非常酷. iPhone上的Safari 4.3也和iPad差不多.这个多窗口的设计,影响了那个年代的第三方浏览器,UC啊,QQ啊都这么学.可是后来呢,iPad上的诸多第三方浏览器都是有标签栏的,Safari估计是被骂多了,在iOS5开始也这么干. 可是其实,iOS4的Safari代码里就已经有关于Tab的代码,可见Safari的重构优化是伴随着发布的,没做完的功能也

Webkit中HTML5 Video的实现分析(六) - Safari视频机制分析

Safari中的视频相关操作封装在QuickTime Plugin里面,存放于/Library/Internet Plugin目录下.   下图是相关类的class diagram: 其中的QuickTime Plugin是通过已淘汰的Apple之前定义的Webkit Plugin协议来实现的,而不是现在支持的Netscape API的机制. 可以参考以下文档:        Introduction to WebKit Plugin Programming Topic           We