颤动动画对FadeTransition的反向影响

Question

在这个简单的代码中，我尝试在小部件顶部显示和隐藏障碍，表明该障碍可能与动画有关，但是当我尝试关闭和隐藏该障碍时，controller.reverse()没有任何动画隐藏

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: BarrierEffect(),
    ));

class BarrierEffect extends StatefulWidget {
  @override
  State<BarrierEffect> createState() => _BarrierEffect();
}

class _BarrierEffect extends State<BarrierEffect> with TickerProviderStateMixin {
  var isShownBarrier = false;
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: const Duration(milliseconds: 1000), vsync: this);
    animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
        setState(() {
          isShownBarrier = false;
        });
      } else if (status == AnimationStatus.dismissed) {
        controller.forward();
        setState(() {
          isShownBarrier = true;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Stack(
          children: <Widget>[
            Center(
              child: RaisedButton(
                  color: Colors.white,
                  child: Text('show barrier'),
                  onPressed: () => controller.forward(),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50.0))),
            ),
            Visibility(
              visible: isShownBarrier ? true : false,
              child: FadeTransition(
                opacity: animation,
                child: Container(
                  color: Colors.black.withOpacity(0.5),
                  child: Center(child: Text('test')),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

这是您要寻找的吗？

完整代码：

void main() => runApp(MaterialApp(home: BarrierEffect()));

class BarrierEffect extends StatefulWidget {
  @override
  State<BarrierEffect> createState() => _BarrierEffect();
}

class _BarrierEffect extends State<BarrierEffect> with TickerProviderStateMixin {
  AnimationController controller;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: controller,
        builder: (_, child) {
          return Stack(
            children: <Widget>[
              Center(
                child: RaisedButton(
                  child: Text('Show Barrier'),
                  onPressed: () => controller.repeat(reverse: true),
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50.0)),
                ),
              ),
              Visibility(
                visible: controller.value != 0,
                child: Opacity(
                  opacity: controller.value,
                  child: Container(
                    color: Colors.black.withOpacity(0.9),
                    child: Center(child: Text('My Barrier', style: TextStyle(color: Colors.white))),
                  ),
                ),
              )
            ],
          );
        },
      ),
    );
  }
}