動畫

animations 是 View 上的動畫聲明陣列。property 指定要控制的屬性，例如 opacity 或 sweepAngle。該 View 的目標值改變時，對應動畫開始過渡；單純為固定屬性添加動畫，不會自動產生變化。

每個組件支持的屬性列表見其頁面。需要動態增刪或重排子 View 時，為它們保留穩定的 key，以便更新仍對應同一個繪製物件。

duration、delay 單位為秒，預設時長為 0.25 秒、延遲為零，預設曲線為 easeInOut。from/to 可明確起止目標，repeat 和 autoreverse 控制重複及往返。同一屬性只應由一個聲明控制。

週期屬性可使用 wrap 選擇跨週期的過渡路徑。例如 startAngle 從 350° 到 10° 可使用 wrap: 360。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 的實際更新頻率。