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

Question

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

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

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's begin:，end:但这似乎并没有改变动画。

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

总体思路是使动画彼此建立在一个随机的新值之上，例如：

第一次旋转：0 -> 10
第二次旋转：10 -> 13
第三次旋转：13 -> 18
... ETC

所以我想知道我是否可以更新动画，或者我应该每次都创建一个新动画？我能想到的另一件事是跟踪位置并每次使用相同的动画（0.0 -> 100.0）作为传输的百分比。

因此，我不会从 10 -> 15 创建一个新动画，而是这样做： currentValue = 10 + (15-10)/100*_animationController.value

score 32 · Accepted Answer

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

总体思路是使动画彼此建立在一个随机的新值之上，例如：

第一次旋转：0 -> 10

第二次旋转：10 -> 13

第三次旋转：13 -> 18

... ETC

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

控制器，它是一种特殊的动画，它简单地从其下限到上限线性生成值（均为双精度值，通常为 0.0 和 1.0）。您可以控制动画的流程 - 让它向前运行、反转它、停止它或重置它。
一个tween，它不是Animation 而是Animatable。补间定义了两个值之间的插值，甚至不必是数字。它transform在底层实现了一个方法，该方法接收动画的当前值并吐出您想要使用的实际值：另一个数字、颜色、线性渐变，甚至是整个小部件。这是您应该用来生成旋转角度的方法。
一个动画，它是您实际要使用其值的动画（所以这是您获取要构建的值的地方）。你可以通过给你的补间动画一个父动画来转换 - 这可能是你的控制器直接，但也可以是你在它上面构建的其他类型的动画（比如一个 CurvedAnimation，它会给你缓动或有弹性/弹性曲线和很快）。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,
               )
            ],
         )
      );
   }
}

希望有帮助！

score 5 · Accepted Answer

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

这是优化不足的，因为您重建的动画远远超出了您应该为动画所做的。自己写也很痛苦。

你会想要使用这个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,
    );
  }
}

我将提交一个拉取请求，以便将来您不需要这段代码。

score 0 · Accepted Answer

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

在您的setNewPosition函数中，只需begin/end为_tween.

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

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

3 回答 3

Related

Reference