Add a brand new dimension to your watch face and convey it to life utilizing animation. With Watch Face Studio (WFS), it’s simple so as to add animations to observe faces with out coding. You should utilize animations in numerous codecs to create aesthetic and exquisite, but optimized watch faces for smartwatches that run on Put on OS. WFS additionally allows you to configure animations to answer person interplay.
This tutorial introduces numerous animation options that may be configured in WFS and suggestions for creating visually enchanting experiences on the watch face canvas. Regardless of the restricted house, the probabilities are limitless!
Animation sorts
Watch Face Studio helps implementing animations in a number of codecs:
- Picture sequence of PNG or JPG frames
The PNG and JPG picture codecs assist tens of millions of colours. Increased decision photos end in greater high quality animation, at the price of file dimension. - Animated GIF
Used for less complicated graphics, the GIF format is lossless and helps 256 colours. - Animated Webp
Webp is a well-liked picture format that helps tens of millions of colours in a compact file dimension.
Comply with together with the demonstration on this tutorial by downloading the sample project. The watch face within the pattern undertaking features a rainbow that seems when the watch face activates, clouds that drift repeatedly throughout the sky, a pinwheel that spins when tapped, and blowing bubbles that emerge at common time intervals.
Implementing animations
You should utilize any design device to create your animation as a sequence of photos, animated GIF, or animated Webp file.
WordThe animation body price in WFS is fastened at 15 fps.
Animated picture sequence
To create the pinwheel animation from a collection of photos:
- In WFS, choose Add Part > Animation > Picture Sequence.
Determine 1: Add picture sequenceThe file browser opens.
- Choose the photographs to incorporate within the sequence and click on Open.
Determine 2: Choose photos for the sequenceThe chosen recordsdata are added to a single sequence layer within the watch face undertaking.
- To switch and preview the animation, choose the picture sequence from the layer record.
Determine 3. Edit picture sequence - Edit the animation:
- To alter the order of the photographs, take away photos, or add photos, choose Import picture.
- To make the animation slower, improve the body variety of any picture.
- To preview the animation, click on Play.
TipIf the identical picture is used repeatedly, improve the variety of frames for that picture. This optimizes reminiscence utilization and reduces the file dimension of your watch face.
Determine 4: Import extra photos, outline variety of frames, preview animation
Multimedia file
I’ve created three extra animations, “rainbow.webp,” “cloud.gif” and “bubble_up.gif,” utilizing a design device and can add them on this demonstration. You’ll be able to comply with the steps beneath so as to add these multimedia-type animations.
- In WFS, choose Add Part > Animation > Animated GIF/Webp. The file browser opens.
- Choose the specified animation file to import and click on Open.
Determine 5: Open multimedia file
Determine 6: Add multimedia in Type tab
Triggering animations
You’ll be able to outline a set off for every animation. Triggers are circumstances that outline when and the way the animation is performed.
Play when watch face on
To play the cloud animation repeatedly each time the watch face is on, within the “Properties” tab for the animation, outline “WatchFace on” as its set off and allow “Auto replay.”
Determine 7: Steady play when watch face on
To play the rainbow animation solely as soon as when the watch face activates, stopping on the final animation body, outline “WatchFace on” as its set off, however allow “Resume playback.”
Determine 8: Play as soon as when watch face on
Play when tapped
To play the pinwheel animation each time the pinwheel picture is tapped, outline “Faucet” as its set off. Outline the animation to start out taking part in with a 1 second delay, and allow the “Auto replay” and “Repeat delay” choices.
Determine 9: Play animation when tapped
Play at time interval
To play the bubble animation every minute, outline “Each Min” as its set off. Make the bubbles disappear on the finish of the animation by enabling “Conceal after completed.”
Determine 10: Play at outlined time interval
Watch face preview
To preview the watch face within the pattern undertaking, open the undertaking in Watch Face Studio, click on “Run,” and choose “On Watch.”
Determine 11: Pattern undertaking watch face
Efficiency suggestions
When designing watch face animations, keep in mind the next ideas to make sure optimum efficiency:
- Battery consumption
Animated parts can devour battery energy extra rapidly than static graphics. Take into account the stability between animation complexity and pictures in your watch face design. - Processing energy
Advanced animation could require extra processing energy so {hardware} limitations of the watch could result in laggy or uneven efficiency - Useful resource effectivity
The higher the animation file dimension, picture decision, or variety of frames, the extra assets are wanted to show the animation. Optimize your graphics to keep away from sluggish efficiency. - Person expertise
Uneven or jarring animations can disrupt the person expertise. For instance, since multimedia photos are loaded asynchronously, there can be delays in beginning animations.
Abstract
Animations can improve the person’s engagement together with your watch face design and improve their time-keeping expertise. Regardless of the constraints of watch {hardware}, Watch Face Studio offers you instruments to unlock your inventive potential and simply implement and configure optimized animations to your watch face designs.
In case you have questions on or need assistance with the data on this tutorial, you may share your queries on the Samsung Developers Forum or contact us via Samsung Developer Support.