如何在 Flutter 中添加两个不同持续时间的不同动画？

Question

我有以下代码动画任何widget

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

class AnimElasticOut extends StatefulWidget {
  final Widget child;
  final int delay;
  final Key key;
  final startAnimation;

  AnimElasticOut(
      {@required this.key,
      @required this.child,
      this.delay,
      this.startAnimation});

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

class AnimElasticOutState extends State<AnimElasticOut>
    with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;
  int duration = 1000;

  @override
  void initState() {
    super.initState();

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

    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.elasticOut,
    );

    if (widget.startAnimation != null) {
      if (widget.delay == null) {
        controller.forward();
      } else {
        Timer(Duration(milliseconds: widget.delay), () {
          controller.forward();
        });
      }
    }
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      child: widget.child,
      scale: animation,
    );
  }
}

示例用法

AnimElasticOut(
                        key: counterElasticOutKey,
                        child: Container(
                          height: 35,
                          padding: EdgeInsets.only(
                              left: 5, top: 5, bottom: 5, right: 15),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Icon(
                                Icons.add_alarm,
                                color: Colors.amber,
                              ),
                              SizedBox(
                                width: 10,
                              ),
                              Counter(
                                key: counterKey,
                              ),
                            ],
                          ),
                        ),
                      ),

我使用以下代码开始动画。

counterElasticOutKey.currentState.controller.forward(from: 0);

现在它可以很好地为小部件设置动画。

我还有另一个代码可以反转动画。

counterElasticOutKey.currentState.controller.reverse();

我想要的是在倒车时使用另一个动画。此外，还有一些其他的持续时间。 比如我想要Curves.easeInOutCubic作为动画曲线，持续时间为milliseconds: 500

我该怎么做？

Answer 1

在AnimationController 和reverseCurve 中有一个属性reverseDuration 在Animation<T> 中

    controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1000),
      reverseDuration: Duration(milliseconds: 250),
    );

    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.elasticOut,
      reverseCurve: Curves.easeInQuad,
    );