Animation

animations est un tableau de déclarations d'animation sur View. property spécifie l'attribut à contrôler, tel que opacity ou sweepAngle. Lorsque la valeur cible de View change, l'animation correspondante commence à effectuer une transition ; le simple fait d'ajouter une animation aux attributs fixes ne produira pas automatiquement des modifications.

Une liste des propriétés prises en charge par chaque composant est fournie sur sa page. Lorsque vous devez ajouter, supprimer ou réorganiser dynamiquement des sous-View, conservez un key stable pour eux afin que les mises à jour correspondent toujours au même objet de dessin.

L'unité de duration, delay est la seconde, la durée par défaut est de 0,25 seconde, le délai est nul et la courbe par défaut est easeInOut. from/to peut clarifier les objectifs de début et de fin, repeat et autoreverse contrôlent la répétition et l'aller-retour. La même propriété ne doit être contrôlée que par une seule déclaration.

Les attributs de période peuvent utiliser wrap pour sélectionner des chemins de transition entre les périodes. Par exemple startAngle utiliserait wrap: 360 de 350° à 10°. sweepAngle représente l'angle de balayage réel, en conservant les directions positives et négatives, et ne prend pas en charge wrap.

Après avoir sélectionné une vitesse, l'exemple convertit une plage de vitesse de 0 à 200 en 0 à 360°. Lorsque la vitesse passe de 50 à 100, l'angle cible passe de 90° à 180° et l'arc prend 0,25 seconde pour terminer la transition. L'unité de vitesse actuelle est utilisée pour la plage de mesure ; une ligne horizontale s'affiche lorsqu'il n'y a pas de mesure.

function main() {
  const speed = $data.current.speed?.value;
  if (speed == null) {
    return (
      <Text fontSize={32} color={$env.foreground}>
        —
      </Text>
    );
  }
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={Math.max(0, Math.min(1, speed / 200)) * 360}
      animations={[
        { property: 'sweepAngle', duration: 0.25, curve: 'easeOut' },
      ]}
    />
  );
}

contentAnimation est utilisé pour mettre à jour du contenu tel que du texte, des images ou des données graphiques. Le type de support est déterminé par le composant spécifique, tel que les transitions de texte numérique et l'interpolation de données graphiques.

L'interpolation de forme nécessite des structures correspondantes avant et après, par exemple, le nombre de points et les paramètres de fermeture de Polyline sont les mêmes et la séquence de commandes de Path est la même. Mettez à jour directement lorsque la structure est incompatible. L'animation est réalisée par le côté dessin et ne nécessite pas de synchronisation de boucle dans main() ; l'animation n'augmente pas la fréquence de mise à jour réelle du capteur ou du OBD.