Stay organized with collections
Save and categorize content based on your preferences.
A PartAnimatedImage contains an animated element that appears on the watch
face. The PartAnimatedImage determines where on the watch face the animated
element appears, and the inner elements determine the specific animated
resource which plays.
Set the level of transparency that this element should have. A value of 0
indicates that the element should be completely transparent. A value of 255
indicates that the element should be completely opaque.
The element's render mode type. Possible values are: SOURCE (default),
MASK, or ALL.
tintColor
Apply a tint color filter to the element. You must specify the color using
either the ARGB format (#ff000000 = opaque black) or the RGB format
(#000000 = black).
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-06-03 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-06-03 UTC."],[],[],null,["# PartAnimatedImage\n\nWatch Face Format version Version 4 Version 3 Version 2 Version 1\n\n*** ** * ** ***\n\nA `PartAnimatedImage` contains an animated element that appears on the watch\nface. The `PartAnimatedImage` determines where on the watch face the animated\nelement appears, and the [inner elements](#inner-elements) determine the specific animated\nresource which plays.\n\nSyntax\n------\n\n```xml\n\u003cPartAnimatedImage x=\"integer\" y=\"integer\" width=\"integer\" height=\"integer\"\n name=\"string\" angle=\"integer\" pivotX=\"integer\" pivotY=\"integer\"\n alpha=\"integer\" renderMode=\"SOURCE | MASK | ALL\"\n tintColor=\"argb-color | rgb-color\" blendMode=\"string\"\u003e\n \u003cAnimationController ... /\u003e\n \u003c!-- One possible inner element is shown. --\u003e\n \u003cAnimatedImage ... /\u003e\n \u003c!-- The Thumbnail inner element is optional, but strongly recommended for performance. --\u003e\n \u003cThumbnail ... /\u003e\n ...\n\u003c/PartAnimatedImage\u003e\n```\n\nAttributes\n----------\n\nThe `PartAnimatedImage` element has the following attributes:\n\n### Required attributes\n\nThe following attributes are required:\n\n`x`, `y`, `width`, `height`\n\n: A collection of integers that specify the element's size and position.\n\n These attributes are [transformable](/reference/wear-os/wff/common/transform/transform).\n\n### Optional attributes\n\nThe following attributes are optional:\n\n`pivotX`, `pivotY`\n\n: A two-dimensional pivot point about which the element rotates. Both values\n are floating-point numbers that are scaled to fit in the range $ \\[0, 1\\] $.\n\n These attributes are [transformable](/reference/wear-os/wff/common/transform/transform).\n\n`angle`\n\n: A number of degrees, clockwise, that the element should be rotated about its\n pivot point.\n\n This attribute is [transformable](/reference/wear-os/wff/common/transform/transform).\n\n`alpha`\n\n: Set the level of transparency that this element should have. A value of `0`\n indicates that the element should be completely transparent. A value of `255`\n indicates that the element should be completely opaque.\n\n This attribute is [transformable](/reference/wear-os/wff/common/transform/transform).\n\n`scaleX`\n\n: The horizontal scaling factor to apply to this element.\n\n This attribute is [transformable](/reference/wear-os/wff/common/transform/transform).\n\n`scaleY`\n\n: The vertical scaling factor to apply to this element.\n\n This attribute is [transformable](/reference/wear-os/wff/common/transform/transform).\n\n[`renderMode`](/training/wearables/wff/effects#clipping)\n\n: The element's render mode type. Possible values are: `SOURCE` (default),\n `MASK`, or `ALL`.\n\n`tintColor`\n\n: Apply a tint color filter to the element. You must specify the color using\n either the ARGB format (`#ff000000` = opaque black) or the RGB format\n (`#000000` = black).\n\n From version 4, this attribute is [transformable](/reference/wear-os/wff/common/transform/transform).\n\n[`blendMode`](/training/wearables/wff/effects#blend-mode)\n\n: Sets the [`blendMode`](/reference/wear-os/wff/common/attributes/blend-mode) for drawing this `PartAnimatedImage` (this element\n is treated as the *src*).\n\nInner elements\n--------------\n\nEach `PartAnimatedImage` element must contain a single\n[`AnimationController`](/reference/wear-os/wff/group/part/animated-image/animation-controller) inner element and one of the following inner\nelements:\n\n- [`AnimatedImages`](/reference/wear-os/wff/group/part/animated-image/animated-images)\n- [`AnimatedImage`](/reference/wear-os/wff/group/part/animated-image/animated-image)\n- [`SequenceImage`](/reference/wear-os/wff/group/part/animated-image/sequence-image)\n\nOptionally, the `PartAnimatedImage` element can also contain the following\nelements:\n\n- [`Gyro`](/reference/wear-os/wff/common/transform/gyro)\n- [`Launch`](/reference/wear-os/wff/common/launch)\n- [`Localization`](/reference/wear-os/wff/common/localization)\n- [`ScreenReader`](/reference/wear-os/wff/common/screen-reader)\n- [`Transform`](/reference/wear-os/wff/common/transform/transform)\n- [`Thumbnail`](/reference/wear-os/wff/group/part/animated-image/thumbnail) - this is strongly recommended.\n- [`Variant`](/reference/wear-os/wff/common/variant/variant)\n\nRecommended for you\n-------------------\n\n- Note: link text is displayed when JavaScript is off\n- [Group](/reference/wear-os/wff/group/group)\n- [PartText](/reference/wear-os/wff/group/part/text/part-text)\n- [PartImage](/reference/wear-os/wff/group/part/image/part-image)"]]