如何链接多个动画对象？

Question

我想要的是链接多个Animation对象，就像我们有一个Animation<double>从 0 到 40 的对象（我们称之为大对象），而我还有另外 4 个 Animation<double>对象，我想要的是

1. 当大动画开始时，第一个动画从它开始，但当大动画达到 10 时结束。
2. 当大的达到 10 时，第二个动画开始，结束的时间是大的达到 20 时。等等...

有人知道如何在颤振中做到这一点吗？

Answer 1

听起来像是交错的动画。基本上，您可以创建一个动画控制器并设置总持续时间。然后，您可以为要执行的每个动画创建单独的补间。对于每个补间，您可以定义一条曲线，对于该曲线，您可以定义动画总持续时间百分比的间隔。当您搜索交错动画时，flutter.dev 中有一个非常好的示例。注意：它们不必是一个接一个，尽管有名称，它们可以同时被解雇，但根据您的需要在不同时间结束。我不确定仅共享 flutter 文档的链接是否合适给出答案，但这里是 https://flutter.dev/docs/development/ui/animations/staggered-animations。我做了类似的事情，但使用了 2 个控制器，我同时触发它们，但它们的持续时间不同。

啊，我是第二名：）

编辑：这是一些带有 2 个控制器的代码

import 'package:flutter/material.dart';
//import 'package:flutter/scheduler.dart';
import 'package:flutter_color_picker/components/color_ripple.dart';

class ColorKnob extends StatefulWidget {
  const ColorKnob({this.color, this.ratio, this.saveColor});

  final Color color;
  final double ratio;
  final Function saveColor;

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

class _ColorKnobState extends State<ColorKnob> with TickerProviderStateMixin {
  AnimationController scaleAnimationController;
  AnimationController rippleAnimationController;
  Animation<double> scaleAnimation;

  @override
  void initState() {
    super.initState();
    scaleAnimationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 100));

    rippleAnimationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 400));

    scaleAnimationController.addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.completed) {
        scaleAnimationController.reverse();
      }
    });

    scaleAnimation = Tween<double>(begin: 1.0, end: 0.8).animate(
        CurvedAnimation(
            parent: scaleAnimationController, curve: Curves.easeOut));

    rippleAnimationController.addStatusListener((AnimationStatus status) {
      if (status == AnimationStatus.completed) {
        widget.saveColor();
      }
    });

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

  @override
  void dispose() {
    super.dispose();
    scaleAnimationController.dispose();
    rippleAnimationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
          decoration: const BoxDecoration(
              shape: BoxShape.circle, color: Colors.transparent),
          child: FractionallySizedBox(
            widthFactor: widget.ratio,
            heightFactor: widget.ratio,
            child: ClipOval(
              clipBehavior: Clip.antiAlias,
              child: Center(
                child: Stack(children: <Widget>[
                  ColorRipple(
                      controller: rippleAnimationController,
                      color: widget.color,
                  ),
                  GestureDetector(
                    onTap: () {
                      //            timeDilation = 1.0;
                      scaleAnimationController.forward(from: 0.0);
                      rippleAnimationController.forward(from: 0.0);
                    },
                    child: Transform.scale(
                      scale: scaleAnimation.value,
                      alignment: Alignment.center,
                      child: Container(
                        width: 60.0,
                        height: 60.0,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: widget.color,
                            border: Border.all(
                              color: const Color(0xFFFFFFFF),
                              style: BorderStyle.solid,
                              width: 4.0,
                            ),
                            boxShadow: const <BoxShadow>[
                              BoxShadow(
                                offset: Offset(0.0, 1.0),
                                blurRadius: 6.0,
                                spreadRadius: 1.0,
                                color: Color(0x44000000),
                              )
                            ]),
                      ),
                    ),
                  ),
                ]),
              ),
            ),
          )),
    );
  }
}

和一个具有多个补间的

import 'package:flutter/material.dart';
//import 'package:flutter/scheduler.dart';

class ColorRipple extends StatelessWidget {
  ColorRipple({this.controller, this.color, this.size})
      : scaleUpAnimation = Tween<double>(begin: 0.8, end: 5.0).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(
              0.2,
              1.0,
              curve: Cubic(0.25, 0.46, 0.45, 0.94),
            ),
          ),
        ),
        opacityAnimation = Tween<double>(begin: 0.6, end: 0.0).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(
              0.4,
              1.0,
              curve: Cubic(0.25, 0.46, 0.45, 0.94),
            ),
          ),
        ),
        scaleDownAnimation = Tween<double>(begin: 1.0, end: 0.8).animate(
          CurvedAnimation(
            parent: controller,
            curve: const Interval(0.0, 0.2, curve: Curves.easeOut),
          ),
        );

  final AnimationController controller;
  final Animation<double> scaleUpAnimation;
  final Animation<double> scaleDownAnimation;
  final Animation<double> opacityAnimation;
  final Color color;
  final Size size;

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
        animation: controller,
        builder: (BuildContext context, Widget child) {
          return Container(
            child: Transform(
              alignment: Alignment.center,
              transform: Matrix4.identity()
                ..scale(scaleDownAnimation.value)
                ..scale(scaleUpAnimation.value),
              child: Opacity(
                  opacity: opacityAnimation.value,
                  child: Container(
                    width: 60.0,
                    height: 60.0,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                            color: color,
                            style: BorderStyle.solid,
                            width: 4.0 - (2 * controller.value))),
                  )),
            ),
          );
        });
  }
}