Animation

animations ist ein Array von Animationsdeklarationen auf View. property gibt das zu steuernde Attribut an, z. B. opacity oder sweepAngle. Wenn sich der Zielwert von View ändert, beginnt die entsprechende Animation mit dem Übergang; Das einfache Hinzufügen einer Animation zu festen Attributen führt nicht automatisch zu Änderungen.

Auf der jeweiligen Seite finden Sie eine Liste der von jeder Komponente unterstützten Eigenschaften. Wenn Sie Sub-View dynamisch hinzufügen, löschen oder neu anordnen müssen, behalten Sie einen stabilen key für sie bei, damit Aktualisierungen immer noch demselben Zeichnungsobjekt entsprechen.

Die Einheit von duration, delay ist Sekunden, die Standarddauer beträgt 0,25 Sekunden, die Verzögerung ist Null und die Standardkurve ist easeInOut. from/to kann die Start- und Endziele klären, repeat und autoreverse steuern Wiederholung und Hin- und Rückfahrt. Dieselbe Eigenschaft sollte nur durch eine Deklaration gesteuert werden.

Periodenattribute können wrap verwenden, um Übergangspfade über Perioden hinweg auszuwählen. Beispielsweise würde startAngle wrap: 360 von 350° bis 10° verwenden. sweepAngle stellt den tatsächlichen Sweep-Winkel unter Beibehaltung der positiven und negativen Richtungen dar und unterstützt wrap nicht.

Nach der Auswahl einer Geschwindigkeit wird im Beispiel ein Geschwindigkeitsbereich von 0–200 in 0–360° umgewandelt. Wenn sich die Geschwindigkeit von 50 auf 100 ändert, ändert sich der Zielwinkel von 90° auf 180° und der Bogen benötigt 0,25 Sekunden, um den Übergang abzuschließen. Für den Messbereich wird die aktuelle Geschwindigkeitseinheit verwendet; Wenn keine Messung erfolgt, wird eine horizontale Linie angezeigt.

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 wird zum Aktualisieren von Inhalten wie Text, Bildern oder Diagrammdaten verwendet. Die Art der Unterstützung wird durch die jeweilige Komponente bestimmt, beispielsweise digitale Textübergänge und Grafikdateninterpolation.

Die Forminterpolation erfordert entsprechende Strukturen davor und danach. Beispielsweise sind die Anzahl der Punkte und die Abschlusseinstellungen von Polyline gleich und die Befehlssequenz von Path ist gleich. Aktualisieren Sie direkt, wenn die Struktur nicht kompatibel ist. Die Animation wird von der Zeichenseite durchgeführt und erfordert kein Schleifentiming in main(); Die Animation erhöht nicht die tatsächliche Aktualisierungsfrequenz des Sensors oder OBD.