Flutter如何实现语音播放动画

在Flutter中如何实现类似语音消息播放时的波浪形动画效果？目前想做一个语音播放界面，需要根据音频音量实时显示动态波形，类似微信语音的波动效果。请问有哪些推荐的插件或实现方案？最好能提供简单的代码示例说明如何控制动画与音频播放同步。

2 回复

Flutter中实现语音播放动画可通过以下步骤：

  1. 使用audioplayers库播放音频。
  2. 利用AnimationController控制动画。
  3. 结合CustomPaint绘制波形或图标动画。
  4. 监听播放状态，动态更新动画进度。

示例：通过AnimatedContainer或Lottie实现动态效果。

更多关于Flutter如何实现语音播放动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现语音播放动画，可以通过以下几种方式：

1. 使用Lottie动画（推荐）

import 'package:lottie/lottie.dart';

Lottie.asset(
  'assets/voice_animation.json',
  controller: _animationController,
  onLoaded: (composition) {
    _animationController
      ..duration = composition.duration
      ..forward();
  },
)

2. 自定义波形动画

class VoiceWaveAnimation extends StatefulWidget {
  @override
  _VoiceWaveAnimationState createState() => _VoiceWaveAnimationState();
}

class _VoiceWaveAnimationState extends State<VoiceWaveAnimation> 
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 500),
      vsync: this,
    )..repeat(reverse: true);
    
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildWaveBar(0.3, _animation.value),
            _buildWaveBar(0.6, _animation.value),
            _buildWaveBar(0.9, _animation.value),
            _buildWaveBar(0.6, _animation.value),
            _buildWaveBar(0.3, _animation.value),
          ],
        );
      },
    );
  }

  Widget _buildWaveBar(double maxHeight, double value) {
    return Container(
      width: 4,
      height: 20 * maxHeight * value,
      margin: EdgeInsets.symmetric(horizontal: 2),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(2),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

3. 使用Rive动画

import 'package:rive/rive.dart';

RiveAnimation.asset(
  'assets/voice_animation.riv',
  controllers: [_simpleController],
)

实现步骤：

  1. 选择动画方式（Lottie最方便）
  2. 控制动画播放/暂停
  3. 根据音频播放状态更新动画
  4. 添加点击事件控制播放

Lottie方案最简单，可以从LottieFiles网站下载现成的语音动画JSON文件。

回到顶部