Modifier l'apparence des éléments de manière dynamique

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Vous pouvez modifier l'apparence de certaines parties du cadran, par exemple en modifiant la position, la taille ou la visibilité, souvent en réponse à des sources de données d'entrée telles que l'heure ou l'accéléromètre.

Dans le format de cadran, cela se fait à l'aide de l'élément Transform. Tous les éléments ne peuvent pas être transformés, mais les principaux éléments transformables incluent les éléments Group, Part* et les primitives de dessin telles que les formes et les styles.

Les attributs de chaque élément pouvant être transformés sont marqués comme tels dans la documentation de référence.

La transformation elle-même est spécifiée dans l'attribut value, dans le langage d'expression du format de cadran, qui peut inclure des sources de données. target spécifie l'attribut à modifier dans l'élément parent.

Par exemple, pour modifier l'angle d'un Arc afin de refléter la progression des étapes:

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

Lorsque STEP_PERCENT change, endAngle est recalculé et Arc est redessiné.

Lorsqu'un élément Transform modifie une valeur cible, il peut être souhaitable que ce changement soit animé sur une période donnée, plutôt qu'un changement immédiat de valeur, ce qui pourrait être choquant. Pour ce faire, utilisez l'élément 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>

Transformations à l'aide de l'accéléromètre

Bien qu'il soit possible d'utiliser l'élément Transform avec des sources de données gyroscopiques telles que ACCELEROMETER_ANGLE_X pour modifier la position ou l'échelle d'un élément, le format de cadran fournit un élément distinct pour ces éléments: Gyro.

Cela vous permet de simplifier l'image globale, en séparant la transformation basée sur le mouvement des autres transformations, telles que celles basées sur le temps, qui peuvent être appliquées au même élément.