Animação

animations é um array de declarações de animação em View. property especifica o atributo a ser controlado, como opacity ou sweepAngle. Quando o valor alvo de View muda, a animação correspondente começa a fazer a transição; simplesmente adicionar animação a atributos fixos não produzirá alterações automaticamente.

Uma lista de propriedades suportadas por cada componente é fornecida em sua página. Quando você precisar adicionar, excluir ou reorganizar sub-View dinamicamente, mantenha um key estável para eles para que as atualizações ainda correspondam ao mesmo objeto de desenho.

A unidade de duration, delay é segundos, a duração padrão é 0,25 segundos, o atraso é zero e a curva padrão é easeInOut. from/to pode esclarecer os objetivos iniciais e finais, repeat e autoreverse controlar a repetição e ida e volta. A mesma propriedade só deve ser controlada por uma declaração.

Os atributos de período podem usar wrap para selecionar caminhos de transição entre períodos. Por exemplo, startAngle usaria wrap: 360 de 350° a 10°. sweepAngle representa o ângulo varrido real, mantendo as direções positiva e negativa e não suporta wrap.

Depois de selecionar uma velocidade, o exemplo converte uma faixa de velocidade de 0–200 em 0–360°. Quando a velocidade muda de 50 para 100, o ângulo alvo muda de 90° para 180° e o arco leva 0,25 segundos para completar a transição. A unidade de velocidade atual é usada para a faixa de medição; uma linha horizontal é exibida quando não há medição.

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 é usado para atualizar conteúdo como texto, imagens ou dados gráficos. O tipo de suporte é determinado pelo componente específico, como transições de texto digital e interpolação de dados gráficos.

A interpolação de forma requer estruturas correspondentes antes e depois, por exemplo, o número de pontos e as configurações de fechamento de Polyline são os mesmos e a sequência de comandos de Path é a mesma. Atualize diretamente quando a estrutura for incompatível. A animação é executada pelo lado do desenho e não requer tempo de loop em main(); a animação não aumenta a frequência de atualização real do sensor ou OBD.