过渡与动画

用基础样式上的 transition 为样式变化添加动画。每一帧都不会重新运行组件。

#悬停过渡

<Button style={{
  bg: "#2563eb",
  transition: { property: "bg", duration: 160 },
  hover: { bg: "#1d4ed8" },
}}>Hover</Button>

#状态驱动的动画

根据状态改变样式，并保持该节点挂载。不要在每一帧重建组件。

<View style={{
  bg: selected() ? "#2563eb" : "#334155",
  opacity: selected() ? 1 : 0.6,
  transition: { property: ["bg", "opacity"], duration: 180 },
}} />

#时长与帧率

时长接受毫秒数或 "180ms" 这样的字符串。需要上限时设置缓动和 maxFps。省略 maxFps 则跟随显示器。

#支持的属性

颜色、边框、圆角、透明度、阴影和变换会插值。宽度、高度和内边距不会。

#挂载与减少动态效果

当组件支持时，在退出过渡期间保持浮层挂载。Show 会立即移除子节点。过渡会遵循系统的「减少动态效果」设置。可在窗口上设置 reduceMotion 来覆盖它。

#动态图像

Image 会播放你传入路径的 GIF 和 WebP 文件。不需要定时器。

<Image value={path} style={{ width: 96, height: 96, objectFit: "contain" }} />