呼吸状态点

进阶 · 完整可运行示例

用原生缩放动画创建轻量状态点，同时提供静态基础值。

完整源码

复制代码到新建仪表，或在 App 内导入 ZIP。

jsx

function main() {
  const active=$data.current.recording;
  return <CardContent title="记录状态">
    <VStack spacing={18}>
      <Transform scaleX={1} scaleY={1} animations={active?[
        {property:'scaleX',from:0.85,to:1.12,duration:1,repeat:'forever',autoreverse:true},
        {property:'scaleY',from:0.85,to:1.12,duration:1,repeat:'forever',autoreverse:true}
      ]:[]}>
        <Circle width={28} height={28} fill={active?$env.accent:($env.dark?'#FFFFFF44':'#12171C44')}/>
      </Transform>
      <Text fontSize={18} color={$env.foreground}>{active?'正在记录':'等待记录'}</Text>
    </VStack>
  </CardContent>;
}

可以先改这些地方

位置	作用	修改建议
`duration:1`	单程时长，秒	一个往返约 2 秒
`0.85 / 1.12`	缩放范围	建议保持克制

在 App 中检查

静态缩略图依旧能看清状态点。
不记录时停下呼吸动画。
减弱动态效果开启时仍能通过文字辨认状态。

呼吸状态点 ​

完整源码 ​

可以先改这些地方 ​

在 App 中检查 ​

相关参考 ​

呼吸状态点

完整源码

可以先改这些地方

在 App 中检查

相关参考