Flutter：如何通过代码触发动画单次播放（含反向）并结合Provider

1. 修正Scale动画的参数错误 #

你之前的代码中，scale的end参数误用了Offset类型，animate类库（比如animate_do）的scale动画接受的是缩放倍数（double），若需单独设置x、y轴缩放，可使用scaleX/scaleY参数。修正后的scale部分：

.scale(
  end: 1.2, // 或分开设置 scaleX:1.2, scaleY:1.2
  duration: const Duration(milliseconds: 500),
)

2. 实现单次往返动画 #

不要使用repeat(reverse: true)（会无限循环），通过正向播放后反向播放实现单次往返效果，需要保存动画控制器引用手动控制流程。

3. 通过Provider触发动画 #

第一步：在Provider中添加触发信号 #

在你的Provider类里维护一个触发状态，启动动画时更新状态并通知监听者：

class WishProvider extends ChangeNotifier {
  bool _triggerAnimation = false;

  bool get triggerAnimation => _triggerAnimation;

  void startAnimation() {
    _triggerAnimation = true;
    notifyListeners();
    // 重置状态，避免重复触发
    Future.delayed(Duration.zero, () {
      _triggerAnimation = false;
      notifyListeners();
    });
  }
}

第二步：UI层绑定控制器并监听Provider #

在Widget中用Consumer监听Provider的触发信号，保存动画控制器，信号触发时启动单次往返动画：

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

  @override
  State<YourWidget> createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  late AnimationController _animationController;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final provider = Provider.of<WishProvider>(context);
    if (provider.triggerAnimation) {
      _playSingleCycleAnimation();
    }
  }

  Future<void> _playSingleCycleAnimation() async {
    await _animationController.forward(); // 正向播放到放大状态
    await _animationController.reverse(); // 反向播放回原状态
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<WishProvider>(
      builder: (context, provider, child) {
        return Text(
          _getItemTitle(option),
          style: _wishState == option
              ? AppTextStyles.avenirNextH5SemiBold
              : AppTextStyles.avenirNextH5Regular,
        )
            .animate(
              controller: (controller) => _animationController = controller,
              autoPlay: false, // 关闭自动播放，手动控制
            )
            .scale(
              end: 1.2,
              duration: const Duration(milliseconds: 500),
            );
      },
    );
  }
}

第三步：触发动画的时机 #

在需要启动动画的场景（比如按钮点击、状态变更），调用Provider的startAnimation方法即可：

// 示例：按钮点击触发动画
ElevatedButton(
  onPressed: () {
    Provider.of<WishProvider>(context, listen: false).startAnimation();
  },
  child: const Text('触发动画'),
)

额外注意事项 #

• 确保使用的动画类库版本适配，API参数匹配。
• 若不需要持久化控制器，也可在onInit中直接处理，但手动绑定控制器灵活性更高。
• 若动画仍不生效，检查autoPlay是否设为false，避免自动播放干扰手动触发逻辑。

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