flutter - 如何使用 Getx 构建动画启动画面？

Question

我对此感到困惑。我不知道如何更新该值以在启动屏幕中为图像设置动画。对于有状态小部件类，我们在监听器内调用 setState(() {}); 来更新值。但是，我如何使用 Getx 实现它？

带有状态小部件的动画:

animationInitilization() {
    animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 2));
    animation =
        CurvedAnimation(parent: animationController, curve: Curves.easeOut);
    animation!.addListener(() {
      setState(() {});
    });
    animationController.forward();
  }

使用 Getx 制作动画:

启动画面:

class SplashScreen extends StatelessWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    SplashScreenViewModel splashScreenViewModel =
        Get.put(SplashScreenViewModel());
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset(
                'assets/images/logo.png',
                width: splashScreenViewModel.animation.value * 200,
                height: splashScreenViewModel.animation.value * 200,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Getx Controller :

class SplashScreenViewModel extends GetxController
    with GetSingleTickerProviderStateMixin {
  late AnimationController animationController;
  late Animation<double> animation;

  @override
  void onInit() {
    animationInitilization();
    super.onInit();
  }

  animationInitilization() {
    animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 2));
    animation =
        CurvedAnimation(parent: animationController, curve: Curves.easeOut)
            .obs
            .value;
    animation.addListener(() => update());
    animationController.forward();
  }
}

Answer 1

SplashScreen 兄弟的动画很棒。

我建议使用 GetBuilder() 使其正常工作:

class SplashScreen extends StatelessWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GetBuilder<SplashScreenViewModel>(
        init: SplashScreenViewModel(),
        builder: (controller) {
          return Stack(
            fit: StackFit.expand,
            children: [
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image.asset(
                    'assets/images/logo.png',
                    width: controller.animation.value * 200,
                    height: controller.animation.value * 200,
                  ),
                ],
              ),
            ],
          );
        },
      ),
    );
  }
}