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

Você pode mudar a aparência de partes do mostrador do relógio, por exemplo, alterar a posição, o tamanho e a visibilidade, geralmente em resposta a fontes 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: elementos Group e Part* , além de primitivos de desenho, como formas e estilos.

Os atributos transformáveis de cada elemento são marcados como tal na documentação de referência.

A transformação é 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á mudado 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" />
    <Stroke color="#FF00FF" thickness="20" />
</Arc>
watchface_dynamic_appearance.xml

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

Quando um elemento de transformação muda um valor de destino, é recomendável que essa mudança seja animada em um período, em vez de uma mudança imediata no valor, que pode ser desagradável. 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>
watchface_dynamic_appearance.xml

Transformações usando o acelerômetro

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

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