Es posible que desees cambiar la apariencia de algunas partes de la cara de reloj, por ejemplo, la posición, el tamaño o la visibilidad, a menudo en respuesta a fuentes de datos de entrada, como la hora del día o el acelerómetro.
En el Formato de Caras de Relojes, esto se logra con el uso del elemento Transform.
No todos los elementos se pueden transformar, pero los principales elementos transformables incluyen los siguientes: Group , elementos Part* y primitivas de dibujo, como formas y estilos.
Los atributos de cada elemento que se pueden transformar se marcan como tales en la documentación de referencia.
La transformación en sí se especifica en el atributo value, en el lenguaje de expresión del Formato de Caras de Relojes, que puede incluir fuentes de datos. target especifica el atributo que se cambiará en el elemento superior.
Por ejemplo, para cambiar el ángulo de un Arc y reflejar el progreso del paso, haz lo siguiente:
<Arc centerX="225" centerY="225" height="420" width="420" startAngle="0" endAngle="0">
<Transform target="endAngle" value="[STEP_PERCENT] * 3.6" />
<...>
</Arc>
A medida que cambia STEP_PERCENT, se vuelve a calcular endAngle y se vuelve a dibujar Arc.
Cuando un elemento Transform cambia un valor objetivo, puede ser conveniente que este cambio se anime durante un período, en lugar de un cambio inmediato en el valor, que podría ser discordante. Usa el elemento Animation para lograr esto:
<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>
Transformaciones con el acelerómetro
Si bien es posible usar el elemento Transform con fuentes de datos giroscópicos, como ACCELEROMETER_ANGLE_X, para cambiar la posición o escala de un elemento, el Formato de Caras de Relojes proporciona un elemento independiente para estos: Gyro.
Esto te permite simplificar el panorama general, ya que separa la transformación basada en el movimiento de otras transformaciones, como las basadas en el tiempo, que se pueden aplicar al mismo elemento.