如何在另一个动画以相同的速度（持续时间）完成之前运行动画答案

【问题标题】：How to run an animation before another animation finished with the same speed (duration)如何在另一个动画以相同的速度（持续时间）完成之前运行动画
【发布时间】：2020-11-30 16:36:01
【问题描述】：

如何在另一个动画以相同的速度（持续时间）结束之前运行一个动画。

我尝试使用动画控制器和带间隔的动画双精度来执行此操作，第一个动画按预期运行，但第二个动画比第一个动画运行得更快。我认为这是因为第二个动画 Interval 设置为 0.5, 1。

这是我尝试使用 Interval 但第二个动画比第一个快

class Ex extends StatefulWidget {
  @override
  _ExState createState() => _ExState();
}

class _ExState extends State<Ex> with SingleTickerProviderStateMixin {
  AnimationController animationController;

  Animation<double> animation1;
  Animation<double> animation2;
  Animation<double> opacityAnimation;

  @override
  void initState() {
    super.initState();
    animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 3));

    animation1 = Tween<double>(
      begin: 250,
      end: 300,
    ).animate(
        CurvedAnimation(curve: Interval(0, 1), parent: animationController))
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        print(status);
        if (status == AnimationStatus.completed) {
          animationController.reset();
        } else if (status == AnimationStatus.dismissed) {
          animationController.forward();
        }
      });

    animation2 = Tween<double>(
      begin: 250,
      end: 300,
    ).animate(
        CurvedAnimation(curve: Interval(0.5, 1), parent: animationController))
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          animationController.reset();
        } else if (status == AnimationStatus.dismissed) {
          animationController.forward();
        }
      });

    opacityAnimation = Tween<double>(
      begin: 1,
      end: 0,
    ).animate(animationController)
      ..addListener(() {
        setState(() {});
      });

    animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    double radius = MediaQuery.of(context).size.height / 4;
    return Scaffold(
      body: Stack(
        children: [
          AnimatedCircle(
              height: animation1.value,
              width: animation1.value,
              opacity: opacityAnimation.value,
              radius: radius),
          AnimatedCircle(
              height: animation2.value,
              width: animation2.value,
              opacity: opacityAnimation.value,
              radius: radius),
          AnimatedCircle(height: 250, width: 250, opacity: 1, radius: radius),
        ],
      ),
    );
  }
}

AnimatedCircle 类：

class AnimatedCircle extends StatelessWidget {
  final double height;
  final double width;
  final double opacity;
  final double radius;
  AnimatedCircle(
      {@required this.height,
      @required this.width,
      @required this.opacity,
      @required this.radius});
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: height,
        width: width,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(radius),
            topLeft: Radius.circular(radius),
            bottomLeft: Radius.circular(radius),
            bottomRight: Radius.circular(radius),
          ),
          border: Border.all(
            width: 1.5,
            color: Colors.green.withOpacity(opacity),
            style: BorderStyle.solid,
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout flutter-animation

【解决方案1】：

您可以尝试使用staggered animations将更多的动画依次堆叠，并选择动画的开始和结束间隔。

在您当前的情况下，第二个动画完成的时间较短，因此运行速度更快。最终你可以给一个动画间隔 (0, 0.5) 和第二个 (0.5, 1)

希望，它至少在某种程度上有用。干杯

【讨论】：