要素の外観を動的に変更する

ウォッチフェイスの一部（位置、サイズ、表示設定など）の外観を変更することがあります。これは、時刻や加速度計などの入力データソースに応じて行うことがよくあります。

Watch Face Format では、Transform 要素を使用してこれを実現します。すべての要素を変換できるわけではありませんが、変換可能な主な要素には、Group 要素、Part* 要素、シェイプやスタイルなどの描画プリミティブが含まれます。

変換可能な各要素の属性は、リファレンス ドキュメントでそのようにマークされています。

変換自体は、データソースを含めることができるウォッチフェイス フォーマット式言語の value 属性で指定します。target は、親要素で変更する属性を指定します。

たとえば、歩数の進捗状況を反映するように Arc の角度を変更するには、次のようにします。

<Arc centerX="225" centerY="225" height="420" width="420" startAngle="0" endAngle="0">
  <Transform target="endAngle" value="[STEP_PERCENT] * 3.6" />
  <...>
</Arc>

STEP_PERCENT が変更されると、endAngle が再計算され、Arc が再描画されます。

Transform 要素がターゲット値を変更する場合、値をすぐに変更すると不自然な動きになるため、この変更を一定期間にわたってアニメーション化することをおすすめします。Animation 要素を使用して、次のようにします。

<PartDraw x="100" y="150" width="250" height="120" >
  <Ellipse x="0" y="0" width="50" height="50">
    <Fill color="#ff0000" />
    <!-- Red ball with no animated transition -->
    <Transform target="x" value="[SECOND] % 2 == 0 ? 0 : 200"/>
  </Ellipse>
  <Ellipse x="0" y="100" width="50" height="50">
    <Fill color="#00ff00" />
    <!-- Green ball eases between each position -->
    <Transform target="x" value="[SECOND] % 2 == 0 ? 0 : 200">
      <Animation duration="1" interpolation="EASE_IN_OUT" />
    </Transform>
  </Ellipse>
</PartDraw>

加速度計を使用した変換

ACCELEROMETER_ANGLE_X などのジャイロスコープ データソースで Transform 要素を使用して要素の位置やスケールを変更することは可能ですが、Watch Face Format には、これらの要素に Gyro という個別の要素が用意されています。

これにより、全体像を簡素化し、同じ要素に適用される可能性のある時間ベースなどの他の変換から、動きベースの変換を分離できます。