애니메이션

animations은 View의 애니메이션 선언 배열입니다. property은 opacity 또는 sweepAngle과 같이 제어할 속성을 지정합니다. View의 대상 값이 변경되면 해당 애니메이션이 전환되기 시작합니다. 고정 속성에 애니메이션을 추가하는 것만으로는 자동으로 변경되지 않습니다.

각 구성 요소가 지원하는 속성 목록은 해당 페이지에 제공됩니다. 하위 View을 동적으로 추가, 삭제 또는 재배열해야 하는 경우 업데이트가 여전히 동일한 그리기 객체에 해당하도록 안정적인 key을 유지하십시오.

duration, delay의 단위는 초이고 기본 지속 시간은 0.25초이며 지연은 0이고 기본 곡선은 easeInOut입니다. from/to은 시작과 끝 목표를 명확히 할 수 있고, repeat 및 autoreverse는 반복과 왕복을 제어할 수 있습니다. 동일한 속성은 하나의 선언으로만 제어되어야 합니다.

기간 속성은 wrap을 사용하여 기간 전체의 전환 경로를 선택할 수 있습니다. 예를 들어 startAngle은 350°에서 10°까지 wrap: 360를 사용합니다. sweepAngle은 실제 스윕 각도를 나타내며 양의 방향과 음의 방향을 유지하며 wrap를 지원하지 않습니다.

속도를 선택한 후 예제에서는 0200°의 속도 범위를 0360°로 변환합니다. 속도가 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의 실제 업데이트 빈도를 증가시키지 않습니다.