在 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: 但这似乎并没有改变动画。

那么我应该怎么做才能在每次用户按下按钮时创建一个 'different' 动画？

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

第一次旋转：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

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

a controller，这是一种特殊的动画，它简单地从下限到上限线性生成值（都是双精度值，通常是 0.0 和 1.0 ).您可以控制动画的流动 - 向前发送、向后发送、停止或重置。运行。
a tween，不是动画而是Animatable。补间定义两个值之间的插值，甚至不必是数字。它在引擎盖下实现了一个 transform 方法，该方法接收动画的当前值并吐出您想要使用的实际值：另一个数字、颜色、线性渐变，甚至整个小部件。这是您应该用来生成旋转角度的内容。
an animation，这是您实际要使用其值的动画（因此这是您获取值以构建的地方).你可以通过给你的补间动画一个父动画来转换 - 这可能是你的控制器直接但也可以是你在它上面构建的其他类型的动画（比如 CurvedAnimation，它会给你缓动或 bouncy/elastic曲线等）。 Flutter 的动画是高度可组合的。

您的代码失败很大程度上是因为您实际上并没有使用您在构建方法中创建的顶级动画并且您每次都在创建一个新的补间和动画你打电话给 setNewPosition。您可以对多个动画“循环”使用相同的补间和动画 - 只需更改现有补间的 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,
               )
            ],
         )
      );
   }
}

希望对您有所帮助！

Answer 2

在工作时，在任何情况下您实际上都不想在您的布局中制作这些动画，正如@filleduchaos 所解释的那样。

这未得到优化，因为您重建的内容远远超出了动画应有的范围。而且自己写很痛苦。

为此您需要使用 AnimatedWidget 系列。它们分为两种类：

XX过渡
动画XX

第一个是低层，它使用 Animation 并监听它，这样你就不需要做那么丑陋的事了:

..addListener(() {
  setState(() {});
});

第二个处理剩余部分：AnimationController、TickerProvider 和 Tween。

这使得使用动画 更容易 因为它几乎是完全自动的。

在您的情况下，旋转示例如下：

class RotationExample extends StatefulWidget {
  final Widget child;

  const RotationExample({
    Key key,
    this.child,
  }) : super(key: key);

  @override
  RotationExampleState createState() {
    return new RotationExampleState();
  }
}

class RotationExampleState extends State<RotationExample> {
  final _random = math.Random();
  double rad = 0.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _rotate,
      child: AnimatedTransform(
        duration: const Duration(seconds: 1),
        alignment: Alignment.center,
        transform: Matrix4.rotationZ(rad),
        child: Container(
          color: Colors.red,
          height: 42.0,
          width: 42.0,
        ),
      ),
    );
  }

  void _rotate() {
    setState(() {
      rad = math.pi * 2 / 25 * _random.nextInt(25);
    });
  }
}

更简单吧？

具有讽刺意味的是，Flutter 忘记提供 AnimatedTransform（尽管我们还有很多其他的！）。不过别担心，我为你做的！

AnimatedTransform实现如下：

class AnimatedTransform extends ImplicitlyAnimatedWidget {
  final Matrix4 transform;
  final AlignmentGeometry alignment;
  final bool transformHitTests;
  final Offset origin;
  final Widget child;

  const AnimatedTransform({
    Key key,
    @required this.transform,
    @required Duration duration,
    this.alignment,
    this.transformHitTests = true,
    this.origin,
    this.child,
    Curve curve = Curves.linear,
  })  : assert(transform != null),
        assert(duration != null),
        super(
          key: key,
          duration: duration,
          curve: curve,
        );

  @override
  _AnimatedTransformState createState() => _AnimatedTransformState();
}

class _AnimatedTransformState
    extends AnimatedWidgetBaseState<AnimatedTransform> {
  Matrix4Tween _transform;

  @override
  void forEachTween(TweenVisitor<dynamic> visitor) {
    _transform = visitor(_transform, widget.transform,
        (dynamic value) => Matrix4Tween(begin: value));
  }

  @override
  Widget build(BuildContext context) {
    return Transform(
      alignment: widget.alignment,
      transform: _transform.evaluate(animation),
      transformHitTests: widget.transformHitTests,
      origin: widget.origin,
      child: widget.child,
    );
  }
}

我会提交一个 pull request，这样你以后就不需要这段代码了。

Answer 3

如果您想使用不同的路径（go/back 方式）反转动画。试试这个。

在您的 setNewPosition 函数中，只需为 _tween 定义新的 begin/end 值。

   void setNewPosition() {
      _tween.begin = 0; //new begin int value
      _tween.end = 1; //new end int value
      _animationController.reverse();
   }

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

What would be the proper way to update animation values in a Flutter animation?

animation

dart

flutter

flutter-animation