Flutter中如何实现SlideTransition单次动画效果？

你的代码里动画无限重复的核心原因是AnimationController调用了repeat(reverse: true)，这个方法会让动画无限循环往返播放。要实现仅播放一次后停止，只需做两处关键修改：

修改要点 #

• 将AnimationController初始化时的..repeat(reverse: true)替换为..forward()：forward()会触发动画从初始值播放到结束值，完成后自动停止，不会重复。
• 删除dispose方法中的_controller.value = 0.5;：控制器执行dispose()后已被释放，再修改其值会引发错误。

修改后的完整代码 #

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Code Sample')),
        body: Center(child: MyStatefulWidget()),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: Duration(milliseconds: 100),
    vsync: this,
  )..forward(); // 替换为forward()，仅播放一次

  late final Animation<Offset> _offsetAnimation = Tween<Offset>(
    begin: Offset.zero,
    end: Offset(1.0, 0.0),
  ).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.linear,
  ));

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

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _offsetAnimation,
      transformHitTests: false,
      child: Padding(
        padding: EdgeInsets.all(0.0),
        child: Icon(Icons.add),
      ),
    );
  }
}

补充说明 #

• 默认情况下，forward()会让动画从初始值（0）播放到结束值（1），完成后停在结束状态。
• 如果需要动画结束后自动重置到初始位置，可以通过监听动画状态实现：

  @override
  void initState() {
    super.initState();
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _controller.reset();
      }
    });
  }
  

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