Анимация

animations — это массив объявлений анимации на View. property указывает атрибут для управления, например opacity или sweepAngle. Когда целевое значение View изменяется, соответствующая анимация начинает переходить; простое добавление анимации к фиксированным атрибутам не приведет к автоматическим изменениям.

Список свойств, поддерживаемых каждым компонентом, представлен на его странице. Если вам нужно динамически добавлять, удалять или переупорядочивать суб-View, сохраняйте для них стабильный key, чтобы обновления по-прежнему соответствовали тому же объекту рисования.

Единица измерения duration, delay — секунды, продолжительность по умолчанию — 0,25 секунды, задержка — ноль, а кривая по умолчанию — easeInOut. from/to может уточнить начальную и конечную цели, repeat и autoreverse контролируют повторение и возврат. Одно и то же свойство должно контролироваться только одной декларацией.

Атрибуты периода могут использовать wrap для выбора путей перехода между периодами. Например, startAngle будет использовать wrap: 360 от 350° до 10°. sweepAngle представляет фактический угол поворота, сохраняя положительное и отрицательное направления, и не поддерживает wrap.

После выбора скорости в примере диапазон скоростей от 0–200 преобразуется в 0–360°. При изменении скорости с 50 на 100 угол цели меняется с 90° на 180°, а для завершения перехода дуге требуется 0,25 секунды. Текущая единица скорости используется для измерения диапазона; горизонтальная линия отображается, когда нет измерений.

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 используется для обновления содержимого, такого как текст, изображения или данные диаграммы. Тип поддержки определяется конкретным компонентом, например цифровыми текстовыми переходами и интерполяцией графических данных.

Интерполяция формы требует соответствующих структур до и после, например, количество точек и настройки закрытия Polyline одинаковы, а последовательность команд Path одинакова. Обновляйте напрямую, если структура несовместима. Анимация выполняется стороной рисования и не требует синхронизации цикла в main(); анимация не увеличивает фактическую частоту обновления датчика или OBD.