Apply motion graphics to your watch face using tag expressions and gyro effects

Objective

Learn to use tag expressions and gyro effects in Watch Face Studio to create watch faces with dynamic and animation-like effects.

Overview

Watch Face Studio is a graphic authoring tool that enables users to create watch faces for the Wear OS smartwatch ecosystem, including Galaxy Watch4 and newer versions. It has features such as tag expressions and gyro effects for creating dynamic and motion-responsive watch faces.

Tag expressions enable components to react to real-time data such as time, battery level, weather, or step count. Learn more about tag expressions by exploring this Code Lab.

Gyro effects in Watch Face Studio lets components move, rotate, fade, or resize based on tilt angle, making your watch faces more interactive. Discover more about gyro effects by checking out this Code Lab.

With gyro effects and tag expressions, you can create watch faces with animation-like effects. In this Code Lab, learn to design a dynamic outer space scene where the Moon orbits Earth and where both the Moon and Earth orbit the Sun while spinning on their axes. Add depth and realism by using gyro effects.

Set up your environment

You will need the following:

• Watch Face Studio (Version 1.9.5 or higher)
• Galaxy Watch or smartwatch running on Wear OS 5 or higher

Sample Project

Here is a sample project for this Code Lab. Download it and start your learning experience!

Start your project

To load the sample project in Watch Face Studio:

1. Click Open Project in Watch Face Studio.

2. Locate the downloaded sample project and click Open.

Add orbital rotation to the Moon and Earth

Using tag expressions, make the Moon orbit around Earth:

1. Select Moon from the layers list and open the Properties pane.
2. In the Placement section, click on the Tags button on the X-coordinate. Input 80*sin([SEC_MSEC]*2.2) as its tag expression.

3. To spin the Moon around the Earth, input 60*cos([SEC_MSEC]*2.2) in the Y-coordinate as its tag expression.

4. Now, make the Moon spin on its own axis as well. Go to Properties > Rotate and set the tag expression of the Angle to [SEC_MSEC]*36.

5. Similarly, make the Earth spin on its own axis. Select Earth and set the tag expression of the Angle to [SEC_MSEC]*36*2.

Make the Earth and Moon orbit the Sun

To make both the Earth and Moon orbit the Sun, group the components together and apply tag expressions:

1. Select Earth and Moon, right-click, and select Group. Then, rename it to Earth and Moon.

2. Use tag expressions to determine the placement of the grouped components. Go to Properties > Placement and apply the following tag expressions:

• X-coordinate: 160*sin([SEC_MSEC]*0.733)
• Y-coordinate: 60*cos([SEC_MSEC]*0.733)

Add gyro effects

To help separate the Sun, Earth, and Moon from the background during movement, apply a larger displacement to the Stars. Since the subject and background move at different speeds, it creates a sense of depth. Increasing this difference can make the separation even more noticeable. To do this, apply gyro effects to the watch face:

1. Select Sun Top, Earth, Moon, Sun Bottom, and Earth Orbit. Go to Properties > Gyro and select Apply Gyro.

2. Then, change the Range to -45 for negative rotation and 45 for positive rotation on both the X-axis and Y-axis.

3. Enter the following values of the Displacement for both axes:

X-axis

• negative rotation X: -15px
• positive rotation X: 40px

Y-axis

• negative rotation Y: -40px
• positive rotation Y: 40px

4. Similarly, click on Stars and select Apply Gyro. Enter the following values of the Displacement for both axes:

X-axis

• negative rotation X: -60px
• positive rotation X: 60px

Y-axis

• negative rotation Y: -60px
• positive rotation Y: 60px

Test the watch face

You can preview your watch face before testing it on a smartwatch:

1. Select the Show/Hide Run icon to show the Run pane. Press the Play button and make sure that 1S/sec is selected. You can see the rotations and movements of the Sun, Earth, and Moon.
2. Next, go to the Gyro section and move the gyro stick to see the gyro effects in action.

To test your watch face on a smartwatch, you need to:

1. Connect your watch to the same network as your computer.
2. In Watch Face Studio, select Run on Device.
3. Select the connected watch you want to test with.
4. If your watch is not detected automatically, click Scan devices to detect your device or enter its IP address manually by clicking the + button.

You're done!

Congratulations! You have successfully achieved the goal of this Code Lab. Now, you can use tag expressions and gyro effects creatively in Watch Face Studio to design more dynamic and motion-responsive watch faces. If you’re having trouble, you may download this file:

To learn more about Watch Face Studio, visit
developer.samsung.com/watch-face-studio