Flutter- 每次重建时播放一次动画

Question

我正在尝试为当前项目中的功能编写自定义组件。这是通过拖动增加容器的高度，当屏幕上的水龙头被释放时，它应该回到原来的状态。问题是每当我重新启动时，动画都会播放一次，如果我拖动组件以增加其大小，它会播放第二次，但不会返回，所以动画不会播放。代码如下;

class _HomeViewState extends State<HomeView> with TickerProviderStateMixin {
  HomeViewController homeController = HomeViewController();

  late Animation<double> translateBetween;
  late AnimationController customAnimationController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Obx(() {
            return Container(
              alignment: Alignment.topCenter,
              child: Column(
                children: [
                  GestureDetector(
                    onVerticalDragUpdate: (dragUpdateDetails) {
                      var tween = Tween(
                          begin: homeController.animatedHeight, end: 20.0);
                      translateBetween = tween.animate(CurvedAnimation(
                        parent: customAnimationController,
                        curve: Curves.bounceOut,
                      ))
                        ..addListener(() {
                          homeController.animatedHeight =
                              translateBetween.value;
                        });

                      if (homeController.animatedHeight >= 20) {
                        homeController.animatedHeight = homeController
                                .animatedHeight -
                            dragUpdateDetails.primaryDelta!.roundToDouble() /
                                6.5;
                      }
                      if (homeController.animatedHeight < 20) {
                        homeController.animatedHeight = 20;
                      }
                      if (homeController.animatedHeight >= 95) {
                        homeController.animatedHeight = 95;
                      }
                    },
                    onVerticalDragEnd: (dragEndDetails) {
                      customAnimationController.forward();
                    },
                    child: Column(
                      children: [
                        const Icon(Icons.arrow_upward_rounded),
                        SizedBox(
                          width: 20.w,
                          child: Divider(
                            color: Colors.black,
                            thickness: 0.3.w,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              width: 100.w,
              height: homeController.animatedHeight.h,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5.w),
                      topRight: Radius.circular(5.w))),
            );
          })
        ],
      ),
    );
  }
}

我使用 getx 控制器来动态改变容器的大小。

class HomeViewController extends GetxController {
  final RxDouble _animatedHeight = 20.0.obs;
  double get animatedHeight => _animatedHeight.value;
  set animatedHeight(double value) => _animatedHeight.value = value;
}

问题动图

Answer 1

您需要在动画完成后将其重置到开头。

试试这个，

 onVerticalDragEnd: (dragEndDetails) {
   customAnimationController.reset();
   customAnimationController.forward();
 },

Flutter- 每次重建时播放一次动画

Flutter- Animation playing once for each rebuild

flutter

flutter-layout

flutter-animation

flutter-getx