Lottie Animation点击仅生效一次求助：如何实现每次点击播放动画

问题原因 #

你的问题出在AnimationController的状态管理上：第一次调用forward()后，控制器会运行到动画结束的completed状态，后续再调用forward()时，因为控制器已经处于终点位置，不会再触发动画播放。

解决方案 #

每次点击时，先将控制器重置到初始状态，再执行播放操作。同时记得在组件销毁时释放控制器资源，避免内存泄漏。

修改后的完整代码 #

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

void main() async {
  runApp(const App());
}

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

  @override
  State<App> createState() {
    return _AppState();
  }
}

class _AppState extends State<App> with SingleTickerProviderStateMixin {
  late final AnimationController my_location_controller;

  @override
  void initState() {
    super.initState();
    my_location_controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 5));
  }

  @override
  void dispose() {
    // 销毁控制器释放资源
    my_location_controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.lightBlue,
      home: Scaffold(
        backgroundColor: Colors.lightBlue,
        body: Center(
          child: SizedBox(
            width: 300,
            height: 300,
            child: GestureDetector(
              onTap: () {
                // 先重置控制器到初始状态，再播放
                my_location_controller.reset();
                my_location_controller.forward();
              },
              child: Lottie.asset(
                'assets/my_location.json',
                controller: my_location_controller,
                // 手动控制播放，关闭自动播放和循环
                animate: false,
                repeat: false,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

补充说明 #

• 将animate和repeat设为false，避免Lottie自动循环播放，完全由点击事件控制动画触发
• 添加dispose()方法销毁控制器，这是使用AnimationController的标准最佳实践，防止内存泄漏

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