animation - 在 Flutter 动画中更新动画值的正确方法是什么？

Question

所以我尝试在 Flutter 中创建一个动画，每次用户按下按钮时都需要不同的结果。

我根据 Flutter Animations tutorial 实现了以下代码并创建了一个函数来更新它。

class _RoulettePageWidgetState extends State<RoulettePageWidget>
with SingleTickerProviderStateMixin {
   Animation<double> _animation;
   Tween<double> _tween;
   AnimationController _animationController;

   int position = 0;

   @override
   void initState() {
      super.initState();
      _animationController =
          AnimationController(duration: Duration(seconds: 2), vsync: this);
      _tween = Tween(begin: 0.0, end: 100.0);
      _animation = _tween.animate(_animationController)
          ..addListener(() {
              setState(() {});
          });
   }

   void setNewPosition(int newPosition) {
      _tween = Tween(
        begin: 0.0,
        end: math.pi*2/25*newPosition);
      _animationController.reset();
      _tween.animate(_animationController);
      _animationController.forward();
   }

   @override
   Widget build(BuildContext context) {
      return Container(
         child: Column(
            children: <Widget>[
               Center(
                  child: Transform.rotate(
                     angle: _animationController.value,
                     child: Icon(
                        Icons.arrow_upward,
                     size: 250.0,
                  ),
               )),
               Expanded(
                  child: Container(),
               ),
               RaisedButton(
                  child: Text('SPIN'),
                  onPressed: () {
                     setState(() {
                        setNewPosition(math.Random().nextInt(25));
                     });
                  },
               )
            ],
         )
      );
   }
}

如您所见，我正在更新 _tween 的 begin: 和 end: 但这似乎并没有改变动画。

那么我应该怎么做才能在用户每次按下按钮时创建一个“不同的”动画？

总体思路是让动画以随机新值相互构建，例如:

• 第一次旋转:0 -> 10
• 第二次旋转:10 -> 13
• 第三次旋转:13 -> 18
• ...等等

所以我想是不是可以更新动画，还是每次都创建一个新的动画？我能想到的另一件事是跟踪位置并每次都使用相同的动画 (0.0 -> 100.0) 作为转移的百分比。

所以我不会从 10 -> 15 创建一个新的动画，我会做类似的事情:currentValue = 10 + (15-10)/100*_animationController.value

Answer 1

我将略过您的代码，并专注于您真正要问的内容:

The general idea is to make the animations build upon each other with a random new value so for example:

• first spin: 0 -> 10

• second spin: 10 -> 13

• third spin: 13 -> 18

• ... etc

有了像这样的显式动画，您对三个对象感兴趣:

• Controller ，这是一种特殊的动画，它简单地从下限到上限线性生成值(均为 double 值，通常为 0.0 和 1.0)。您可以控制动画的流动 - 让它向前运行、反转、停止或重置。

• tween，不是动画而是可动画。补间定义两个值之间的插值，甚至不必是数字。它在底层实现了一个 transform 方法，该方法接收动画的当前值并吐出您想要使用的实际值:另一个数字、颜色、线性渐变，甚至整个小部件.这就是您应该用来生成旋转角度的内容。

• 一个动画，这是您实际要使用其值的动画(所以这是您获取值以用于构建的地方)。你可以通过给你的补间一个父动画来转换 - 这可能是你的 Controller 直接但也可以是你在它上面构建的其他类型的动画(比如 CurvedAnimation，它会给你缓和或弹性/弹性曲线和很快)。 Flutter 的动画是高度可组合的。

你的代码失败很大程度上是因为你实际上并没有使用你在构建方法中创建的顶级动画并且你每次调用时都在创建一个新的补间和动画设置新位置。您可以对多个动画“循环”使用相同的补间和动画 - 只需更改现有补间的 begin 和 end 属性，它就会冒泡到动画中。结果是这样的:

class _RoulettePageWidgetState extends State<RoulettePageWidget>
with SingleTickerProviderStateMixin {
   Animation<double> _animation;
   Tween<double> _tween;
   AnimationController _animationController;
   math.Random _random = math.Random();

   int position = 0;

   double getRandomAngle() {
      return math.pi * 2 / 25 * _random.nextInt(25);
   }

   @override
   void initState() {
      super.initState();
      _animationController =
          AnimationController(duration: Duration(seconds: 2), vsync: this);
      _tween = Tween(begin: 0.0, end: getRandomAngle());
      _animation = _tween.animate(_animationController)
          ..addListener(() {
              setState(() {});
          });
   }

   void setNewPosition() {
      _tween.begin = _tween.end;
      _animationController.reset();
      _tween.end = getRandomAngle();
      _animationController.forward();
   }

   @override
   Widget build(BuildContext context) {
      return Container(
         child: Column(
            children: <Widget>[
               Center(
                  child: Transform.rotate(
                     angle: _animation.value,
                     child: Icon(
                        Icons.arrow_upward,
                     size: 250.0,
                  ),
               )),
               Expanded(
                  child: Container(),
               ),
               RaisedButton(
                  child: Text('SPIN'),
                  onPressed: setNewPosition,
               )
            ],
         )
      );
   }
}

希望对您有所帮助!