建立動畫圖片
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
除了錶面上的靜態圖片,動畫圖片還能為使用者帶來更豐富的體驗。
請注意,本節將專門說明如何使用動畫圖片檔案。您可以使用 Transform
元素為錶面上的元件加上動畫效果,詳情請參閱「動態變更元素外觀」頁面。
動畫可由動畫圖片檔案 (例如動畫 GIF) 或 Images
序列組成,這些元素會結合成動畫。
除了指定要使用的檔案,您還需要定義動畫的行為方式,例如是否要循環播放,如果不循環播放,則要定義結束時的動作,以及其他選項。請使用 AnimationController
。
最後,請在所有動畫中加入縮圖圖片。
將這些元素結合起來,即可實作以下基本動畫:
<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>
如要進一步瞭解如何加入動畫圖片清單,以及從靜態圖片建構動畫,請參閱 PartAnimatedImage
參考資料。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2025-07-27 (世界標準時間)。
[null,null,["上次更新時間:2025-07-27 (世界標準時間)。"],[],[],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."]]