動態變更元素外觀

您可能需要變更錶面的部分外觀,例如變更位置、大小、顯示設定,通常是為了回應輸入資料來源,例如時間或加速度計。

在錶面格式中,您可以使用 Transform 元素達成這項目標。並非所有元素都能轉換,但主要的可轉換元素包括:GroupPart* 元素,以及形狀和樣式等繪圖原始元素。

每個元素的可轉換屬性會在參考說明文件中標示為可轉換。

轉換作業本身是在 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>

使用加速計的轉換

雖然可以使用 Transform 元素搭配陀螺儀資料來源 (例如 ACCELEROMETER_ANGLE_X) 來變更元素的位置或比例,但錶面格式也提供專屬元素:Gyro

這樣一來,您就能簡化整體情況,將以動作為基礎的轉換與其他轉換 (例如以時間為基礎的轉換) 分開,這些轉換可能會套用至同一個元素。