H5 's Gravity Sensing chapter

There are two main events in the cell phone's gravity-sensing support:

1. Orientationchange (triggered when the screen is flipped)

2. Deviceorientation+devicemotion (Gravity sensing and gyroscope)

Popular Science Time

Gravity sensor , basically the standard configuration of tablets and smartphones, plays a very simple role, for example, you play a racing game, control the left and right turn, screen horizontal screen and vertical screen switch, all need to use the gravity sensor module.

The gyroscope , also called the angular velocity sensor, is used to measure the angular velocity of the movement of the deflection and inclination of the physical quantity. can be accurately analyzed to determine the user's actual action, through the actions he collected to give some instructions to the mobile phone.

Orientationchange

Numerical	Significance
0	Phone vertical screen Status
90	Rotate Right
-90	Left rotation

Through the Orientationchange can know the screen status of the phone, so that the horizontal screen of the page through the event to pop up to inform users of the horizontal screen prompts. Of course, when the user locks the screen rotation function, there is no way to trigger (heart plug).

Deviceorientation && devicemotion

Event	meaning function
Deviceorientation	Angle of movement
Devicemotion	Acceleration information for moving

As is known in the table, we can know the angle of the mobile phone movement of the user by gravity sensor.

Based on this, we can judge the user's device movement angle to achieve the visual error layer movement effect, this is a hidden interactive form, quietly enriched the page's effect, but also let the elements of the page have a better sense of design.

If you want to quickly achieve this effect, here is a recommendation to the front end of an open source component Parallax.js

http://matthew.wagerfield.com/parallax/

In addition to moving the wrong layer, we can also use mobile mobile direction to create games, such as control of the direction of vehicle movement and so on. In addition to the movement angle of knowledge, there are gyroscope equipment, we can also use Devicemotion to learn the mobile phone acceleration, so as to simulate a shake-like function.

The page combines shaking of the interaction, the need to reveal the content mysteriously packaged up, very good to arouse the user's curiosity and product suspense sense (here to do not have gyroscope equipment to judge, the interactive form from shake to change to sliding screen)

Summary

At present, more and more equipment comes with gyroscope, in the future, I believe that more equipment will be supported, and there are more creative topics combining gravity induction.

Or the usual, look at a few types of H5 that use gravity sensing.

1 rotate the phone instead of the mouse to drag

A set of ideal home self-cultivation

We usually see the switch between the page is down, pull up, left and right, and this H5 creative point is that users have to tilt the phone around to switch between different scenes. In the user tilt the mobile phone process, the main four scenes will be presented, respectively: location, garden, matching and apartment. This is a typical case of controlling the field of vision by knowing the angle of the user's mobile phone movement.

2 Correct phone balance

Three steps to get you out of your circle of friends

This is a popular review of the case of a youth to save Internet addiction, in the technical realization of the use of gravity sensor, you must put the phone on the level of the table, or the game can not go on, in 60 seconds, if you touch the phone screen, the screen will end. So you have to wait 60 seconds to get there and enjoy 60 seconds without a cell phone.

3 Gravity sense game

To save the freedom of orange

In this H5, the main point is to promote the core is a rare 6 airbag, so in this small game, the designer using H5 gyroscope technology, Orange and airbags for the game elements to achieve interaction, the orange appears after the use of gravity sensor left and right shaking the phone, the orange will move to the corresponding direction, the airbag will bounce up, A few airbags in succession will send the oranges out of the top even if they succeed.

Racing games can also use gravity-sensing technology

H5 's Gravity Sensing chapter