Learning How to Tap into Apple's Gyroscope

Learning How to Tap into Apple's Gyroscope

Image with three phones, the left and right phone is tilted using gyroscope
Image with three phones, the left and right phone is tilted using gyroscope

Learning about gyroscope axes will help you properly create gryoscope interactions.

Time for a quick math lesson! We're throwing it all the way back to 7th grade Geometry to reacquaint ourselves with the three axes on a graph. This time though, we're creating cool interactions with gyroscope instead of finding the volume of a cube (phew!)

First: a bit of background on gyroscopes. A gyroscope is a device for measuring orientation. It spins freely around an axis. Your iPhone can act as a gyroscope, measuring your phone's orientation along the X, Y, and Z axes.

The X, Y, and Z Axes

All three axes are perpendicular to each other, which means there is a 90º angle between each axis. To trigger an interaction using gyroscope, you need to select the axis that the gyroscope will orient around. You can select the X, Y, or Z axis or use them all together.

Three axes shown

In the diagrams below, the gray rectangle represents a phone, the black line represents the axis, and the red arrow represents the direction you'll tilt your phone.

Gyroscope axis with direction

Offsets

You can specify the gyroscope's starting orientation to get even more specific with measuring orientation. An orientation of "0, 0, 0" would be the phone laying flat on a surface, so a good starting orientation might be "80, 0, 0." This means 80º around the X axis (which simulates someone holding their phone) and 0º in the Y & Z axis (which means the phone is facing the user and upright).

You can adjust this starting point using X, Y, and Z Offsets, which are available when the respective axis is selected.

Gyroscope's Range of Recognized Degree

In iOS apps, gyroscopes trigger interactions when they're measuring between a given range of degrees on a given trigger. This range is set with a minimum and a maximum degree value.

iPhone icon tilted to 45 and -45 degrees to show the endpoints of a gyroscope range

When the gyroscope is measuring the minimum degree value, the action will also be at its minimum value. Similarly, when the gyroscope is measuring the maximum degree value, the action will be at its maximum value. Within the gyroscope's range, the action will move continuously within its own range.

Together, these properties—the axis, offset, and range—create a gyroscope trigger. You can mix and match these values to create your own custom gyroscope interaction (Try it in Play!).

Interaction

iOS

Start designing your mobile app in Play today.

Get Started for Free

Want to talk or get a demo?

Start designing your mobile app in Play today.

Get Started for Free

Want to talk or get a demo?

Start designing your mobile app in Play today.

Get Started for Free

Want to talk or get a demo?