Flutter 动画优化

Question

所以，我想要实现一个具有多个动画的动画控制器，并且我想反转该控制器中的特定动画，现在我使用多个控制器，每个控制器作为单个动画的父级

代码：

late final AnimationController controllerHeightCard,
    controllerHeightNativeView, controllerInsertingView;

void heightAnimation1() {
  controllerHeightCard = AnimationController(
      duration: const Duration(milliseconds: 250), vsync: this);

  controllerInsertingView = AnimationController(
      duration: const Duration(milliseconds: 250), vsync: this);
  heightAnimation_1 =
      Tween(begin: 310.0, end: 380.0).animate(controllerHeightCard);
  heightAnimation_1.addListener(() {
    cardHeight.value = heightAnimation_1.value;
  });
  heightAnimation_2 =
      Tween(begin: 0.0, end: 75.0).animate(controllerHeightNativeView);

  heightAnimation_2.addListener(() {
    containerHeight.value = heightAnimation_2.value;
  });
  controllerHeightCard.addListener(() {
    if (controllerHeightCard.isCompleted && isSignUp.value) {
      controllerHeightNativeView.forward();
    }
  });

  controllerHeightNativeView.addStatusListener((status) {
    if (controllerHeightNativeView.isDismissed && isSignUp.value == false) {
      controllerHeightCard.reverse();
    }
  });
}

heightAnimationForward() {
  isSignUp.value = !isSignUp.value;
  if (isSignUp.value == true) {
    controllerHeightCard.forward();
  }
  if (isSignUp.value == false) {
    controllerHeightNativeView.reverse(from: 0.1);
  }
}

我该如何实现这个目标！！

PS：我是flutter的初学者，抱歉垃圾代码

Answer 1

更易于管理且更少重复的代码的常见做法是使用具有多个动画对象的单个动画控制器

这里是如何重构代码的：

class YourWidget extends StatefulWidget {
  @override
  _YourWidgetState createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double> _cardHeightAnimation;
  late final Animation<double> _containerHeightAnimation;
  bool isExpanded = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 250),
      vsync: this,
    );

    _cardHeightAnimation =
        Tween<double>(begin: 100.0, end: 200.0).animate(_controller)
          ..addListener(() {
            setState(() {});
          });

    _containerHeightAnimation =
        Tween<double>(begin: 50.0, end: 150.0).animate(_controller)
          ..addListener(() {
            setState(() {});
          });
  }

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

  void toggleAnimations() {
    if (isExpanded) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
    isExpanded = !isExpanded;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            AnimatedBuilder(
              animation: _cardHeightAnimation,
              builder: (_, __) => Container(
                height: _cardHeightAnimation.value,
                width: 200,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text(
                    "Height: ${_cardHeightAnimation.value.toStringAsFixed(2)}"),
              ),
            ),
            const SizedBox(height: 20),
            AnimatedBuilder(
              animation: _containerHeightAnimation,
              builder: (_, __) => Container(
                height: _containerHeightAnimation.value,
                width: 200,
                color: Colors.red,
                alignment: Alignment.center,
                child: Text(
                    "Container Height: ${_containerHeightAnimation.value.toStringAsFixed(2)}"),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: toggleAnimations,
              child: Text(isExpanded ? "Collapse" : "Expand"),
            ),
          ],
        ),
      ),
    );
  }
}