Create animated images
Stay organized with collections
Save and categorize content based on your preferences.
In addition to static images on the watch face, animated images can bring a
further dimension to the user experience.
Note that this section is specifically about using animated image files. It is
possible to animate components on the watch face using the Transform element,
which is covered on the Dynamically changing the appearance of
elements page.
Animations can consist of either an animated image file, such as an animated
GIF, or a sequence of Images, which combine together to form an animation.
As well as specifying the files to use, you'll need to define how the animation
should behave, for example, whether to loop the playback, or if not, what to do
at the end, among other options. For this, use an AnimationController.
Finally, for all animations, include a thumbnail
image in all animations.
Putting this together, a basic animation can be implemented as follows:
<PartAnimatedImage x="0" y="0" width="450" height="450">
<AnimationController play="ON_VISIBLE"/>
<AnimatedImage resource="my_animation" format="AGIF"/>
<Thumbnail resource="my_animation_thumbnail" />
</PartAnimatedImage>
Consult the PartAnimatedImage reference for more details on including a
list of animated images and constructing an animation from still images.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-05-20 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-05-20 UTC."],[],[],null,["# Create animated images\n\nIn addition to static images on the watch face, animated images can bring a\nfurther dimension to the user experience.\n\nNote that this section is specifically about using animated image files. It is\npossible to animate components on the watch face using the `Transform` element,\nwhich is covered on the [Dynamically changing the appearance of\nelements](/training/wearables/wff/transform) page.\n\nAnimations can consist of either an animated image file, such as an animated\nGIF, or a sequence of `Images`, which combine together to form an animation.\n\nAs well as specifying the files to use, you'll need to define how the animation\nshould behave, for example, whether to loop the playback, or if not, what to do\nat the end, among other options. For this, use an [`AnimationController`](/training/wearables/wff/group/part/animated-image/animation-controller).\n\nFinally, for all animations, include a [thumbnail\nimage](/training/wearables/wff/group/part/animated-image/thumbnail) in all animations.\n\nPutting this together, a basic animation can be implemented as follows: \n\n \u003cPartAnimatedImage x=\"0\" y=\"0\" width=\"450\" height=\"450\"\u003e\n \u003cAnimationController play=\"ON_VISIBLE\"/\u003e\n \u003cAnimatedImage resource=\"my_animation\" format=\"AGIF\"/\u003e\n \u003cThumbnail resource=\"my_animation_thumbnail\" /\u003e\n \u003c/PartAnimatedImage\u003e\n\nConsult the [`PartAnimatedImage`](/training/wearables/wff/group/part/animated-image/part-animated-image) reference for more details on including a\nlist of animated images and constructing an animation from still images."]]
