无限期旋转容器

Question

我想无限期旋转图像。

此容器是堆栈中的小部件之一，并希望它能够连续不停地旋转。

final AnimationController animation = AnimationController(
  duration: const Duration(milliseconds: 1800),
  vsync: const NonStopVSync(),
)..repeat();

final Tween tween = Tween(begin: 0.0, end: math.pi);

var square = Container(
  width: 100,
  height: 100,
  transform: Matrix4.identity(),
  color: Colors.amber,
);

...

class Foo extends State<Bar> {
    ...


    animation.addListener((){
       square.transform = Matrix4.rotationZ(tween.evaluate(animation));
    });

    Widget build(BuildContext context) {
        return Stack(
           children: [
              ...
              Center(
                 child: square
              )
           ]
        )
    }
}

我得到了这个error: 'transform' can't be used as a setter because it's final. (assignment_to_final at [digital_clock] lib/digital_clock.dart:139)

我将如何做我想做的事？

Answer 1

试试这样的：

class InfiniteAnimation extends StatefulWidget {
  final Widget child;
  final int durationInSeconds;

  InfiniteAnimation({@required this.child, this.durationInSeconds = 2,});

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

class _InfiniteAnimationState extends State<InfiniteAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;
  Animation<double> animation;
​
  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: widget.durationInSeconds),
    );
    animation = Tween<double>(
      begin: 0,
      end: 12.5664, // 2Radians (360 degrees)
    ).animate(animationController);
​
    animationController.forward();
​
    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        animationController.repeat();
      }
    });
  }
​
  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animationController,
      builder: (context, child) => Transform.rotate(
        angle: animation.value,
        child: widget.child,
      ),
    );
  }

  @override
  void dispose() {
    animationController?.dispose();

    super.dispose();
  }
}

---

您基本上需要创建一个StatefulWidget 混合（with 关键字）SingleTickerProviderStateMixin，提供一个AnimationController，启动动画，然后在动画完成时重复。

AnimationBuilder 是一种更好的方式来告诉小部件在每一帧上更新，而无需监听 animationController 并显式调用 setState。

你可以这样使用它：

InfiniteAnimation(
  durationInSeconds: 2, // this is the default value
  child: Icon(
    Icons.expand_more,
    size: 50.0,
    color: Colors.white,
  ),
)