Flutter如何实现Clubhouse用户说话时头像外圈动态光环效果？

可用现成组件包 #

• 如果你用Flutter开发，直接使用avatar_glow包即可实现基础的脉动光环效果，支持自定义光环颜色、扩散范围、脉动频率，直接和头像组件嵌套即可使用。
• 如果你用React/React Native开发，可以使用react-native-avatar-glow或者对应原生端的GlowingAvatar类组件，参数配置逻辑和Flutter版本基本一致。

结合Agora SDK的功能联动实现 #

要实现仅用户发言时触发光环、停止发言自动关闭的效果，需要和Agora的音频检测能力绑定，步骤如下：

1. 开启Agora SDK的本地/远端用户音量提示功能，调用对应接口设置音量回调的触发间隔，建议设置为200ms可以兼顾流畅度和性能消耗。
2. 收到音量回调后，判断对应用户的音量是否超过预设阈值（一般建议设置为20~30，可避免环境音误触发）。
3. 音量达标时触发光环动画启动，连续3次回调音量低于阈值时停止动画，可避免说话停顿时光环频繁闪烁。

自定义光环动画核心逻辑 #

如果现成组件不符合你的设计需求，可以自行实现动画效果：

• 光环本质是多层半透明圆形，按不同时间差执行缩放+透明度渐变动画，外层圆形缩放比例更大、透明度更低，内层接近头像的圆形缩放比例小、透明度更高。
• 选择Curves.easeInOutQuart类缓动曲线，动画周期设置为1.5s~2s即可达到接近Clubhouse的原生效果。
• 如需更贴合真实发言状态，可以把光环的扩散范围和音量大小绑定，音量越大光环扩散越远。

内容的提问来源于stack exchange，提问作者Flutterconfusions