How to realize the function of Shake in html5
This article mainly explains "how to achieve the shake function of html5". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to achieve the shake function of html5".
First, optimize DeviceMotionEvent.
Remove useless code and re-encapsulate DeviceMotionEven
The code is as follows:
If (window.DeviceMotionEvent) {
Var speed = 25 position / define a numeric value
Var x = y = z = lastX = lastY = lastZ = 0 position / reset all values
Window.addEventListener ('devicemotion', function () {
Var acceleration = event.accelerationIncludingGravity;// assigns the sensing value to acceleration
X = acceleration.x
Y = acceleration.y
Z = acceleration.z
If (Math.abs (x-lastX) > speed | | Math.abs (y-lastY) > speed) {
/ / TODO: the data logic operation to be performed after shaking can be realized here
Donghua ()
}
LastX = x
LastY = y
LastZ = z
}, false)
}
Because there are many requirements in the actual project that can not be well implemented.
For example, you cannot continue to execute DeviceMotionEvent events until the animation is finished.
So further optimization has been made.
The code is as follows:
Var frank1
Function donghua () {
/ / Animation event
$(".img") .animate ({left:'0',opacity:'1'}, 700 focus function () {frank1;})
});
If (window.DeviceMotionEvent) {
Var speed = 25 position / define a numeric value
Var x = y = z = lastX = lastY = lastZ = 0 position / reset all values
Window.addEventListener ('devicemotion', function () {
Var acceleration = event.accelerationIncludingGravity;// assigns the sensing value to acceleration
X = acceleration.x
Y = acceleration.y
Z = acceleration.z
If (Math.abs (x-lastX) > speed | | Math.abs (y-lastY) > speed) {
/ / TODO: the data logic operation to be performed after shaking can be realized here
If (frank1) {
Donghua ()
Frank0
}
}
LastX = x
LastY = y
LastZ = z
}, false)
}
Thank you for your reading, the above is the content of "how to achieve the shake function of html5". After the study of this article, I believe you have a deeper understanding of how to achieve the shake function of html5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
