动态更改元素外观

您可能需要更改表盘某些部分的显示效果,例如更改位置、大小、可见性,这通常是响应 输入数据源(例如一天中的时间或加速度计)而进行的。

在表盘格式中,这通过使用 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

这使您可以简化整体视图,将基于运动的转换与其他转换(例如基于时间的转换,这些转换可能应用于同一元素)分开。