如何在Flutter中制作yoyo动画？

Question

我知道在AnimationController上有repeat()方法，但它总是从开头开始。

是否有内置的方法可以执行一次正向动画和一次反向动画，并且重复执行？

谢谢

- Tree

Answer 1

repeat方法支持可选命名参数reverse，所以您可以编写：

animationController.repeat(reverse: true);

这是现代、简单的解决方案。

- Vince Varga

---

如何执行一次重复？ - Pemba Tamang

一个解决方法可能是添加一个状态监听器并手动计算状态更改次数（参见Remi的答案以获得灵感），但可能有一种更优雅的方法，所以我建议您开一个新的问题。 - Vince Varga

哦，是的，这样更有意义！ - Vince Varga

你能添加完整的示例吗？ - giorgio79

如果你正在寻找缓动动画序列，可以参考以下代码：[ TweenSequenceItem(tween: Tween(begin: 1.0, end: 1 - dynamicEndVal), weight: 75.0), TweenSequenceItem(tween: Tween(begin: 1 - dynamicEndVal, end: 1.0), weight: 25.0), ] - user5381191

Answer 2

你可以使用addStatusListener来监听动画的状态。并在动画结束时将其反转。

final AnimationController c;
...
c.addStatusListener((status) {
  if (status == AnimationStatus.completed) {
    c.reverse();
  }
  else if (status == AnimationStatus.dismissed) {
    c.forward();
  }
});

- Rémi Rousselet

---

谢谢。那就是我最终的做法。 - Tree

Answer 3

我有一个更简单的解决方案，使用simple_animations包中的MirrorAnimation小部件。

使用它，您甚至不需要创建AnimationController。还有一个LoopAnimation小部件，可以在一个方向上连续运行动画。

return MirrorAnimation(
      builder: (context, child, double value) {
        return Transform.rotate(
          angle: pi * value,
          child: const Icon(Icons.notifications),
        );
      },
      duration: const Duration(seconds: 1),
      tween: Tween<double>(begin: 0, end: 2),

    );

- Banjoe