iOS Safari/WebKit对DeviceMotionEvent的实现
来源:互联网 发布:js判断radio哪个被选中 编辑:程序博客网 时间:2024/05/16 12:24
请先阅读《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>
(其中左图是把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
- iOS Safari/WebKit对DeviceMotionEvent的实现
- iOS Safari/WebKit对DeviceMotionEvent的实现
- iOS Safari/WebKit对DeviceOrientationEvent的实现
- iOS Safari和UIWebView对orientationchange事件的实现
- IOS SAFARI对JPG的奇怪问题
- iOS开发:WebKit、Safari以及SafariViewController
- iOS开发:WebKit、Safari以及SafariViewController
- 新的webkit浏览器---改造Safari
- swt学习之WEBKIT的Safari问题
- 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现
- 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现
- 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现
- 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现
- 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现
- 网页在Safari快速滚动和回弹的原理:-webkit-overflow-scrolling:touch;的实现
- Webkit中HTML5 Video的实现分析(六) - Safari视频机制分析
- 实现iOS 8 Safari可伸缩的NavigationBar
- WebKit、Safari以及SafariViewController
- I学霸官方免费教程十八:Java常用类之Object类
- 五步搞定Android开发环境部署
- linux设备驱动归纳总结(三):1.字符型设备之设备申请
- x264中bs.h文件部分函数解读
- ubuntu 没有.ssh文件
- iOS Safari/WebKit对DeviceMotionEvent的实现
- 在线文档地址大全
- 多校第七场 1007 hdu 5375 Gray code(dp)
- 关于 No operations allowed after connection closed.错误
- 关于用创建vector<type> name类型的一维数组(vector<type> name[])来存储图(邻接表法储存)
- 详解C#break ,continue, return
- $.post 提交数据
- HDOJ 1301 Jungle Roads 最小生成树 kruskal && prim
- 28-反射机制-01-反射机制(概述&应用场景)