en ko

Gyro effects

Add movement to your watch face to help your design stand out. Gyro effects change the appearance of the watch face as the watch is tilted.

Gyro effects let you adjust the dimensions, inner pivot positions, rotation, and opacity of objects in your watch face.

In the Gyro section of the Properties tab, adjust the X and Y rotation dimensions of independent objects to create 3D effects for your watch face. You can define how the object responds to watch rotation along the X and Y axes.

Figure 1. Applying gyro effects

Rotation axes

Gyro effects apply as the watch moves within the -90º to 90º range along the X and Y axes. The watch is considered level when it is at 0º.

You can also design watch faces that change appearance when the watch moves clockwise or counter-clockwise.

Figure 2. Gyro axes

When wearing your watch on your left wrist, if your watch rotates 90º upwards (counter-clockwise) along the X axis, this displays as -90º. When the watch rotates 90º downwards (clockwise) along the X axis, this displays as 90º.

Figure 3. Rotation around X axis

When wearing your watch on your left wrist, if your watch rotates 90º to the left along the Y axis, this displays as -90º. When the watch rotates 90º to the right along the Y axis, this displays as 90º.

Figure 4. Rotation around Y axis

Range

Range values are used to calculate how much the elements rotate. For example, if you enter values of -90 and +90, to create a pivot range of -90º to 90º, then inner_pivot_x is 80 pixels to the right of the base value when the watch rotates 80º.

Figure 5. Defining range values

The following figure illustrates how an element rotates depending on the X and Y range values.

Figure 6. Range value examples

You can also configure the following additional properties for gyro mode:

  • Scale enlarges and shrinks an object in relation to a point at its center. The point remains in the same position while the object gets bigger or smaller.
  • Displacement changes the position of an object using a point at its center. The “Position” value is based on the center of the object.
  • Rotate rotates an object based on a point at its center. Rotations do not change the position of the object.

Figure 7. Additional gyro properties: Scale, displacement, and rotate