Animación

animations es una matriz de declaraciones de animación en View. property especifica el atributo a controlar, como opacity o sweepAngle. Cuando el valor objetivo de View cambia, la animación correspondiente comienza a realizar la transición; simplemente agregar animación a atributos fijos no producirá cambios automáticamente.

En su página se proporciona una lista de propiedades admitidas por cada componente. Cuando necesite agregar, eliminar o reorganizar dinámicamente sub-View, mantenga un key estable para ellos para que las actualizaciones sigan correspondiendo al mismo objeto de dibujo.

La unidad de duration, delay es segundos, la duración predeterminada es 0,25 segundos, el retraso es cero y la curva predeterminada es easeInOut. from/to puede aclarar los objetivos iniciales y finales, repeat y autoreverse controlan la repetición y el ida y vuelta. Una misma propiedad sólo debe controlarse mediante una declaración.

Los atributos de período pueden usar wrap para seleccionar rutas de transición entre períodos. Por ejemplo, startAngle usaría wrap: 360 de 350° a 10°. sweepAngle representa el ángulo de barrido real, conserva las direcciones positiva y negativa y no admite wrap.

Después de seleccionar una velocidad, el ejemplo convierte un rango de velocidad de 0–200 a 0–360°. Cuando la velocidad cambia de 50 a 100, el ángulo objetivo cambia de 90° a 180° y el arco tarda 0,25 segundos en completar la transición. Para el rango de medición se utiliza la unidad de velocidad actual; Se muestra una línea horizontal cuando no hay ninguna medición.

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 se utiliza para actualizar contenido como texto, imágenes o datos de gráficos. El tipo de soporte está determinado por el componente específico, como transiciones de texto digital e interpolación de datos gráficos.

La interpolación de formas requiere estructuras correspondientes antes y después, por ejemplo, el número de puntos y la configuración de cierre de Polyline son los mismos y la secuencia de comandos de Path es la misma. Actualizar directamente cuando la estructura sea incompatible. La animación la realiza el lado dibujado y no requiere sincronización de bucle en main(); La animación no aumenta la frecuencia de actualización real del sensor o OBD.