Briefly describe the difference, which will be further compared later:
DeviceOrientationEvent is the get direction and obtains the absolute value of the device when it is still;
DeviceMotionEvent is used to get the moving speed and obtain the difference rate between the device and the previous time.
--------------------------------------------------------------------------------
Background:
Apple still finds only one document:
There is still no example. Write it yourself:
[Html]
<Html>
<Head>
<Title> DeviceMotionEvent </title>
<Meta charset = "UTF-8"/>
</Head>
<Body>
<P> x axis acceleration: <span id = "x"> 0 </span> meters per second </p>
<P> y axis acceleration: <span id = "y"> 0 </span> meters per second </p>
<P> z axis acceleration: <span id = "z"> 0 </span> meters per second </p>
<Hr/>
<P> X axis acceleration (gravity acceleration): <span id = "xg"> 0 </span> meters per second </p>
<P> Y axis acceleration (gravity acceleration): <span id = "yg"> 0 </span> meters per second </p>
<P> Z axis acceleration (with gravity acceleration taken into account): <span id = "zg"> 0 </span> meters per second </p>
<Hr/>
<P> left and right rotation speed: <span id = "alpha"> 0 </span> degrees per second </p>
<P> before and after rotation speed: <span id = "beta"> 0 </span> degrees per second </p>
<P> reverse speed: <span id = "gamma"> 0 </span> degrees per second </p>
<Hr/>
<P> last notification receipt interval: <span id = "interval"> 0 </span> millisecond </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>
<Html>
<Head>
<Title> DeviceMotionEvent </title>
<Meta charset = "UTF-8"/>
</Head>
<Body>
<P> x axis acceleration: <span id = "x"> 0 </span> meters per second </p>
<P> y axis acceleration: <span id = "y"> 0 </span> meters per second </p>
<P> z axis acceleration: <span id = "z"> 0 </span> meters per second </p>
<Hr/>
<P> X axis acceleration (gravity acceleration): <span id = "xg"> 0 </span> meters per second </p>
<P> Y axis acceleration (gravity acceleration): <span id = "yg"> 0 </span> meters per second </p>
<P> Z axis acceleration (with gravity acceleration taken into account): <span id = "zg"> 0 </span> meters per second </p>
<Hr/>
<P> left and right rotation speed: <span id = "alpha"> 0 </span> degrees per second </p>
<P> before and after rotation speed: <span id = "beta"> 0 </span> degrees per second </p>
<P> reverse speed: <span id = "gamma"> 0 </span> degrees per second </p>
<Hr/>
<P> last notification receipt interval: <span id = "interval"> 0 </span> millisecond </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> Use MobileSafari or UIWebView to open the preceding webpage. You can see the real-time changes of 10 values.
(The left is the value when the ipad is flat on the horizontal table, and the right is the value when the ipad is quickly rotated. As shown in the right figure, the absolute value can be greater than 360 because it represents the speed and the unit is degrees per second .)
(Click an image to see the big picture)
These ten attributes are:
Event. acceleration. x (y, z): the acceleration of device movement in the direction of the x (y, z) axis. See the figure in iOS Safari/WebKit's implementation of DeviceOrientationEvent.
Event. accelerationIncludingGravity. x (y, z): acceleration in the direction of the x (y, z) axis after the acceleration of gravity. Because gravity acceleration only affects the Z axis, the X axis and Y axis are the same as the acceleration value, and the Z axis differs by about 9.8. (The absolute value is not equal because of the floating point Precision problem)
RotationRate: The concept of alpha, beta, and gamma is consistent with that of DeviceOrientationEvent. The difference is that the value of DeviceOrientationEvent is the difference value relative to the initial state. As long as the device direction remains the same, how it moves will not affect the value. DeviceMotionEvent is the difference time ratio relative to a previous instantaneous value, that is, the speed of change. Once the device is still, it is restored to 0.
Event. interval is the interval between the last time the callback notification is received.
--------------------------------------------------------------------------------
Relationship Diagram of related classes:
Similar to DeviceOrientationEvent, DeviceMotionData is used as a data container because there are too many data records.
When JavaScript Execution encounters addEventListener, the browser stack is almost the same. The difference between callback notifications is that only a few more parameters are passed in.
[Plain]
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 )()
#3 0x38974b0a in _ 48-[CoreMotionManager sendMotionData: withHeading:] _ block_invoke_0 ()
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 )()
#3 0x38974b0a in _ 48-[CoreMotionManager sendMotionData: withHeading:] _ block_invoke_0 ()
--------------------------------------------------------------------------------
PS:
1. Mac WebKit classes are still redundant in iOS, Which is useless, such as WebDeviceOrientation.
2. Real machine debugging is required. The simulator does not support Core Motion.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
