Animazione

animations è un array di dichiarazioni di animazione su View. property specifica l'attributo da controllare, ad esempio opacity o sweepAngle. Quando il valore target di View cambia, l'animazione corrispondente inizia la transizione; la semplice aggiunta di animazioni agli attributi fissi non produrrà automaticamente modifiche.

Nella relativa pagina viene fornito un elenco delle proprietà supportate da ciascun componente. Quando è necessario aggiungere, eliminare o riorganizzare dinamicamente il sotto-View, mantieni un key stabile in modo che gli aggiornamenti corrispondano ancora allo stesso oggetto di disegno.

L'unità di duration, delay è secondi, la durata predefinita è 0,25 secondi, il ritardo è zero e la curva predefinita è easeInOut. from/to può chiarire gli obiettivi di inizio e fine, repeat e autoreverse controllano la ripetizione e il viaggio di andata e ritorno. La stessa proprietà dovrebbe essere controllata solo da una dichiarazione.

Gli attributi del periodo possono utilizzare wrap per selezionare i percorsi di transizione tra i periodi. Ad esempio startAngle utilizzerebbe wrap: 360 da 350° a 10°. sweepAngle rappresenta l'angolo di spostamento effettivo, mantenendo le direzioni positiva e negativa e non supporta wrap.

Dopo aver selezionato una velocità, l'esempio converte un intervallo di velocità da 0–200 a 0–360°. Quando la velocità cambia da 50 a 100, l'angolo target cambia da 90° a 180° e l'arco impiega 0,25 secondi per completare la transizione. Per il campo di misura viene utilizzata l'unità di velocità corrente; quando non è in corso alcuna misurazione viene visualizzata una linea orizzontale.

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 viene utilizzato per aggiornare contenuti come testo, immagini o dati grafici. Il tipo di supporto è determinato dal componente specifico, come le transizioni di testo digitale e l'interpolazione dei dati grafici.

L'interpolazione della forma richiede strutture corrispondenti prima e dopo, ad esempio, il numero di punti e le impostazioni di chiusura di Polyline sono gli stessi e la sequenza di comandi di Path è la stessa. Aggiorna direttamente quando la struttura è incompatibile. L'animazione viene eseguita dal lato di disegno e non richiede temporizzazione del loop in main(); l'animazione non aumenta la frequenza di aggiornamento effettiva del sensore o del OBD.