Using Animation to Create Dynamic Watch Faces
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. notethe animation frame rate in wfs is fixed at 15 fps. 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. tipif the same image is used repeatedly, increase the number of frames for that image. this optimizes memory usage and reduces the file size of your watch face. 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 tipto implement multiple animations that users can select from, add animation files in the “style” tab. for more information, see style tab. 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.