Using Animation to Create Dynamic Watch Faces
Jakia Sultana
Engineer, Samsung Developer Program
Add a new dimension to your watch face and bring it to life using animation. With Watch Face Studio (WFS), it’s easy to add animations to watch faces without coding. You can use animations in various formats to create aesthetic and beautiful, yet optimized watch faces for smartwatches that run on Wear OS. WFS also enables you to configure animations to respond to user interaction.
This tutorial introduces various animation features that can be configured in WFS and tips for creating visually enchanting experiences on the watch face canvas. Despite the limited space, the possibilities are endless!
Animation types
Watch Face Studio supports implementing animations in several formats:
- Image sequence of PNG or JPG frames
The PNG and JPG image formats support millions of colors. Higher resolution images result in higher quality animation, at the cost of file size. - Animated GIF
Used for simpler graphics, the GIF format is lossless and supports 256 colors. - Animated Webp
Webp is a popular image format that supports millions of colors in a compact file size.
Follow along with the demonstration in this tutorial by downloading the sample project. The watch face in the sample project includes a rainbow that appears when the watch face turns on, clouds that drift continuously across the sky, a pinwheel that spins when tapped, and blowing bubbles that emerge at regular time intervals.
Implementing animations
You can use any design tool to create your animation as a sequence of images, animated GIF, or animated Webp file.
Animated image sequence
To create the pinwheel animation from a series of images:
- In WFS, select Add Component > Animation > Image Sequence.
Figure 1: Add image sequence
The file browser opens. - Select the images to include in the sequence and click Open.
Figure 2: Select images for the sequence
The selected files are added to a single sequence layer in the watch face project. - To modify and preview the animation, select the image sequence from the layer list.
Figure 3. Edit image sequence - Edit the animation:
- To change the order of the images, remove images, or add images, select Import image.
- To make the animation slower, increase the frame number of any image.
- To preview the animation, click Play.
Figure 4: Import additional images, define number of frames, preview animation
Multimedia file
I have created three more animations, “rainbow.webp,” “cloud.gif” and “bubble_up.gif,” using a design tool and will add them in this demonstration. You can follow the steps below to add these multimedia-type animations.
- In WFS, select Add Component > Animation > Animated GIF/Webp. The file browser opens.
- Select the desired animation file to import and click Open.
Figure 5: Open multimedia file
Figure 6: Add multimedia in Style tab
Triggering animations
You can define a trigger for each animation. Triggers are conditions that define when and how the animation is played.
Play when watch face on
To play the cloud animation continuously whenever the watch face is on, in the “Properties” tab for the animation, define “WatchFace on” as its trigger and enable “Auto replay.”
Figure 7: Continuous play when watch face on
To play the rainbow animation only once when the watch face turns on, stopping on the last animation frame, define “WatchFace on” as its trigger, but enable “Resume playback.”
Figure 8: Play once when watch face on
Play when tapped
To play the pinwheel animation whenever the pinwheel image is tapped, define “Tap” as its trigger. Define the animation to start playing with a 1 second delay, and enable the “Auto replay” and “Repeat delay” options.
Figure 9: Play animation when tapped
Play at time interval
To play the bubble animation each minute, define “Every Min” as its trigger. Make the bubbles disappear at the end of the animation by enabling “Hide after finished.”
Figure 10: Play at defined time interval
Watch face preview
To preview the watch face in the sample project, open the project in Watch Face Studio, click “Run,” and select “On Watch.”
Figure 11: Sample project watch face
Performance tips
When designing watch face animations, bear in mind the following concepts to ensure optimal performance:
- Battery consumption
Animated elements can consume battery power more quickly than static graphics. Consider the balance between animation complexity and images in your watch face design. - Processing power
Complex animation may require more processing power so hardware limitations of the watch may lead to laggy or choppy performance - Resource efficiency
The greater the animation file size, image resolution, or number of frames, the more resources are needed to display the animation. Optimize your graphics to avoid sluggish performance. - User experience
Choppy or jarring animations can disrupt the user experience. For example, since multimedia images are loaded asynchronously, there can be delays in starting animations.
Summary
Animations can increase the user’s engagement with your watch face design and enhance their time-keeping experience. Despite the limitations of watch hardware, Watch Face Studio gives you tools to unlock your creative potential and easily implement and configure optimized animations for your watch face designs.
If you have questions about or need help with the information in this tutorial, you can share your queries on the Samsung Developers Forum or contact us through Samsung Developer Support.
