Modificare l'aspetto degli elementi in modo dinamico

Potresti voler modificare l'aspetto di alcune parti del quadrante, ad esempio modificare la posizione, le dimensioni, la visibilità, spesso in risposta a origini dati di input come l'ora del giorno o l'accelerometro.

In Watch Face Format, questo risultato si ottiene tramite l'utilizzo dell'elemento Transform. Non tutti gli elementi possono essere trasformati, ma gli elementi trasformabili principali includono: Group, Part* e primitive di disegno come forme e stili.

Gli attributi di ogni elemento che sono trasformabili sono contrassegnati come tali nella documentazione di riferimento.

La trasformazione stessa è specificata nell'attributo value nel linguaggio di espressione del formato del quadrante, che può includere origini dati. target specifica l'attributo da modificare nell'elemento principale.

Ad esempio, per modificare l'angolo di un Arc in modo che rifletta l'avanzamento dei passi:

<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

Man mano che STEP_PERCENT cambia, endAngle viene ricalcolato e Arc ridisegnato.

Quando un elemento Trasformazione modifica un valore di destinazione, può essere opportuno che questa modifica venga animata per un periodo di tempo, anziché una modifica immediata del valore, che potrebbe essere stridente. Utilizza l'elemento Animation per ottenere questo risultato:

<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

Trasformazioni che utilizzano l'accelerometro

Sebbene sia possibile utilizzare l'elemento Transform con origini dati giroscopiche come ACCELEROMETER_ANGLE_X per modificare la posizione o la scala di un elemento, Watch Face Format fornisce un elemento separato per queste operazioni: Gyro.

In questo modo, puoi semplificare il quadro generale, separando la trasformazione basata sul movimento da altre trasformazioni, come quella basata sul tempo, che potrebbero essere applicate allo stesso elemento.