如何在Flutter应用中实现语音交互动画？

Question

我正在 Flutter 中开发一个个人助理应用程序，可以记录您的语音并提供响应，类似于 ChatGPT。我想添加动画来直观地指示用户何时说话以及机器人何时响应。具体来说，我正在寻找像圆圈这样的动画，它可以通过语音输入进行动画并反映说话活动。

用户说话：当用户说话时会出现动画的圆圈。

机器人响应：机器人响应时的类似动画。

有人在 Flutter 中实现过类似的东西吗？是否有任何现有的软件包或自定义解决方案可以帮助实现此效果？任何有关实现这些动画的代码示例或指导将不胜感激！

Answer 1

class CirclePainter extends CustomPainter {
  final double volume;

  CirclePainter(this.volume);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue.withAlpha((volume * 15).clamp(0, 255).toInt())
      ..style = PaintingStyle.fill;

    double radius = (volume * 1.5).clamp(50, 150);
    canvas.drawCircle(size.center(Offset.zero), radius, paint);
  }

  @override
  bool shouldRepaint(CirclePainter oldDelegate) => volume != oldDelegate.volume;
}

您可以自定义它。