アニメーション画像を作成する
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
ウォッチフェイスの静止画像に加えて、アニメーション画像を追加すると、ユーザー エクスペリエンスに新たな次元を加えることができます。
このセクションでは、アニメーション画像ファイルの使用について説明します。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 UTC。
[null,null,["最終更新日 2025-07-27 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."]]