动画

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 的实际更新频率。