Mudar a aparência de elementos de forma dinâmica

Talvez você queira mudar a aparência de partes do mostrador do relógio, por exemplo, alterar a posição, o tamanho, a visibilidade, muitas vezes em resposta a origens de dados de entrada, como a hora do dia ou o acelerômetro.

No Formato do mostrador do relógio, isso é feito usando o elemento Transform. Nem todos os elementos podem ser transformados, mas os principais elementos transformáveis incluem: Group , elementos Part* e primitivas de desenho, como formas e estilos.

Os atributos de cada elemento que podem ser transformados são marcados como tal na documentação de referência.

A transformação em si é especificada no atributo value, na linguagem de expressão do formato do mostrador do relógio, que pode incluir fontes de dados. O target especifica o atributo que será alterado no elemento pai.

Por exemplo, para mudar o ângulo de um Arc e refletir o progresso da etapa:

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

À medida que STEP_PERCENT muda, endAngle é recalculado e o Arc é redesenhado.

Quando um elemento de transformação muda um valor de destino, pode ser desejável que essa mudança seja animada ao longo de um período, em vez de uma mudança imediata no valor, que pode ser irritante. Use o elemento Animation para fazer isso:

<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>

Transformações usando o acelerômetro

Embora seja possível usar o elemento Transform com fontes de dados giroscópicas, como ACCELEROMETER_ANGLE_X, para mudar a posição ou a escala de um elemento, o Formato do mostrador do relógio fornece um elemento separado para isso: Gyro.

Isso permite simplificar a imagem geral, separando a transformação baseada em movimento de outras transformações, como a baseada em tempo, que pode ser aplicada ao mesmo elemento.