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:

  1. In WFS, select Add Component > Animation > Image Sequence.

    Figure 1: Add image sequence

    The file browser opens.
  2. 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.
  3. To modify and preview the animation, select the image sequence from the layer list.

    Figure 3. Edit image sequence

  4. 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.

  1. In WFS, select Add Component > Animation > Animated GIF/Webp. The file browser opens.
  2. 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.

Preferences Submitted

You have successfully updated your cookie preferences.