内部带有 FadeTransition 的 ScaleTransition 动画无法正常工作

Question

我正在尝试同时使用

ScaleTransition

和

FadeTransition

为小部件设置动画，但该动画无法正常工作。只有第一次才可以正常工作。缩放动画有时会随机工作，或者取决于您按下按钮的速度。

这里是简单的复制代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: LogoScale(),
        ),
      ),
    );
  }
}

class LogoScale extends StatefulWidget {
  const LogoScale({super.key});

  @override
  State<LogoScale> createState() => LogoScaleState();
}

class LogoScaleState extends State<LogoScale> {
  bool show = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: (){
            setState(() {
              show = !show;
            });
          },
          child: Text(show ? 'Hide Logo' : 'Show Logo'),
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimationInOut(
                show: show,
                child: const FlutterLogo(size: 100.0,)
            ),
          ],
        ),
      ],
    );
  }
}

class AnimationInOut extends StatefulWidget {
  final bool show;
  final Widget child;

  const AnimationInOut({super.key,
    required this.show,
    required this.child,
  });

  @override
  State<AnimationInOut> createState() => AnimationInOutState();
}

class AnimationInOutState extends State<AnimationInOut> with SingleTickerProviderStateMixin {

  late AnimationController animationController;
  late Animation<double> scaleAnimation;
  late Animation<double> fadeAnimation;

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(vsync: this, duration: const Duration(milliseconds: 300));
    animationController.value = widget.show ? 1.0 : 0.0;
    scaleAnimation = animationController.drive(Tween<double>(begin: 0.0, end: 1.0));
    fadeAnimation = animationController.drive(Tween<double>(begin: 0.0, end: 1.0));
  }

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

  @override
  void didUpdateWidget(AnimationInOut oldWidget) {
    super.didUpdateWidget(oldWidget);
    if(widget.show){
      animationController.forward();
    }else{
      animationController.reverse();
    }
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: scaleAnimation,
      child: FadeTransition(
        opacity: fadeAnimation,
        child: widget.child,
      ),
    );
  }
}

我错过了什么？有什么想法吗？

Answer 1

我运行了你的示例并看到了同样的问题。我交换了 FadeTransition 和 ScaleTransition 以查看它是否始终优先考虑第二个小部件的动画，并且它始终工作。

所以而不是

@override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: scaleAnimation,
      child: FadeTransition(
        opacity: fadeAnimation,
        child: widget.child,
      ),
    );
  }

做

@override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: fadeAnimation,
      child: ScaleTransition(
        scale: scaleAnimation,
        child: widget.child,
      ),
    );
  }