如何实现Lottie动画半段播放？打造静音与取消静音切换按钮

我们可以通过维护状态变量+手动控制动画控制器的播放区间，来实现点击切换半段动画的效果。以下是修改后的完整实现方案：

核心思路 #

• 用布尔变量跟踪当前静音状态
• 给Lottie组件添加点击交互，触发动画区间切换
• 控制动画控制器在0.0-0.5（取消静音）或0.5-1.0（静音）区间播放对应片段

完整代码示例 #

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class MuteToggleButton extends StatefulWidget {
  const MuteToggleButton({super.key});

  @override
  State<MuteToggleButton> createState() => _MuteToggleButtonState();
}

class _MuteToggleButtonState extends State<MuteToggleButton> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  bool isMuted = true; // 初始设为静音状态，对应动画0.5的位置

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this)
      ..value = 0.5 // 初始定位到动画中间（静音状态）
      ..addListener(() {
        setState(() {}); // 同步动画进度到UI
      });
  }

  void _toggleMute() {
    setState(() {
      isMuted = !isMuted;
    });

    final halfDuration = _controller.duration! ~/ 2;
    if (isMuted) {
      // 播放后半段动画（0.5→1.0），切换到静音状态
      _controller.animateTo(1.0, duration: halfDuration, curve: Curves.easeInOut);
    } else {
      // 播放前半段动画（0.5→0.0），切换到取消静音状态
      _controller.animateTo(0.0, duration: halfDuration, curve: Curves.easeInOut);
    }
  }

  @override
  void dispose() {
    _controller.dispose(); // 销毁控制器，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: _toggleMute,
          child: Lottie.asset(
            'assets/mute.json',
            controller: _controller,
            animate: false, // 关闭自动播放，完全手动控制
            onLoaded: (composition) {
              setState(() {
                _controller.duration = composition.duration;
              });
            },
          ),
        ),
      ],
    );
  }
}

关键修改说明 #

1. isMuted状态变量：用来标记当前静音状态，点击时切换并触发对应动画逻辑。
2. 关闭自动播放：设置animate: false，避免Lottie默认自动播放和手动控制逻辑冲突。
3. 半段动画时长：取原动画时长的一半，保证半段动画的播放速度和原动画一致。
4. 资源释放：在dispose中销毁动画控制器，遵循Flutter的内存管理规范。

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