アニメーション画像を作成する

ウォッチフェイスの静止画像に加えて、アニメーション画像を追加すると、ユーザー エクスペリエンスに新たな次元を加えることができます。

このセクションでは、アニメーション画像ファイルの使用について説明します。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 リファレンスをご覧ください。