属性与内容动画

动画分为两类：数值或颜色属性变化使用 animations，文字、素材或路径内容替换使用 contentAnimation。脚本描述目标，平滑过程由原生绘图处理。

属性变化动画 animations

<Transform rotation={$data.current.heading ?? 0}
  animations={[{property: 'rotation', duration: 0.25, curve: 'easeOut'}]}>
  <Symbol name="location.north.fill" width={24} height={32} color={$env.accent}/>
</Transform>

配置	默认 / 值	说明
property	必填字符串	本组件支持的标量属性名
duration	默认 0.25 秒	一段动画时长
delay	默认 0 秒	初始延迟
curve	linear、easeIn、easeOut、easeInOut、spring	默认 easeInOut
wrap	可选正数	等价值周期，例如 360
from / to	成对提供	节点出现时播放指定端点动画
repeat	默认 1；数字或 forever	显式端点动画的总次数
autoreverse	布尔值	显式动画每次向前后再返回

每项属性有自己的进度。新读数到来时，从当前显示值继续，不必重启动画组中的其他属性。没有列入数组的变化立即更新。

放在正确的组件上

• rotation、scaleX/Y、translateX/Y：放在 Transform。
• opacity：放在要淡入淡出的组件。
• progress：放在支持进度的 Arc 等组件。
• value：可以用于 RepeatedLayout 的周期对齐值。

数组、对象、布尔值、文字内容、枚举和 zIndex 不能直接作为标量属性插值。

环绕与重复

359° 到 0° 的方位变化应跨过边界，而不是绕远路。旋转默认采用 360° 环绕；循环刻度的 value 可以显式声明 wrap: 360。

<Transform scaleX={1} scaleY={1} animations={[
  {property: 'scaleX', from: 0.85, to: 1.1, duration: 1, repeat: 'forever', autoreverse: true},
  {property: 'scaleY', from: 0.85, to: 1.1, duration: 1, repeat: 'forever', autoreverse: true}
]}>
  <Circle width={24} height={24} fill={$env.accent}/>
</Transform>

repeat 是总次数，不是“额外再重复几次”。autoreverse 的一次包含去程和回程，总时间约为 duration × 2。显式旋转 from: 0, to: 360 会按指定的端点转完整一圈，不会被最短路径压缩掉。

内容变化动画 contentAnimation

<Text fontSize={64} color={$env.foreground}
  contentAnimation={{type: 'numericText', duration: 0.18}}>
  {$data.current.speed === null ? '—' : Math.round($data.current.speed)}
</Text>

组件	可用类型
Text	fade、slide、scale、numericText
Image、Symbol	fade、slide、scale
Path、Polyline、LineChart、BarChart	fade、slide、scale、interpolate

通用配置为 duration、delay、curve。slide 还接受 direction 与 distance；scale 接受 scale。numericText 可用 direction: 'automatic' | 'up' | 'down'，默认时长 0.18 秒。

首次显示直接呈现内容；之后内容改变才触发过渡。只改颜色或字号，不会重新播放内容替换动画。内容动画也不负责子节点新增、删除或排序。

路径插值

interpolate 要求两份数据结构相容：数组长度相同，对象键匹配，非数值字段不变。例如同样数量、同样排序的 Polyline 点可以插值；点数变化时会退回淡入淡出。

可见性、性能与静态状态

• 隐藏或退到后台后，原生帧刷新会停止。
• 减弱动态效果和静态缩略图采用普通属性值，不播放这些覆盖动画。
• 原生动画不让 JavaScript 每个显示帧重新执行。
• 一节点最多 64 项动画，同一属性不能重复声明。
• Map 的相机变化由原生地图控制；不要给原生地图分支添加像素滤镜动画。

旧接口 motion、motionDuration、motionAmount 和单数 animation 不使用，正确属性是 animations。