繁体   English   中英

Flutter GetX:Animation 与 GetxController

[英]Flutter GetX: Animation with GetxController

我正在为我的新项目尝试 GetX,并尝试使用受此评论启发的 AnimationController。 Tween -> blur & spread & AnimationController -> duration的默认值一切正常。

我在做什么:

1:创建一个对应controllerwidget (控制器通过initialBinding的initialBinding绑定)。

GetMaterialApp(
  ...
  initialBinding: AnimationBinding()
  ...
);

class AnimationBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<AnimationController>(
      () => AnimationController(),
    );
  }
}

class CustomAnimatedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<LogoAnimationController>(
      builder: (_) {
        return Container(
          width: 150,
          height: 150,
          child: Text('for demo only, originally its not text widget'),
          ...
          remaining code that uses `_.animation.value`
          ...
          ),
        );
      },
    );
  }
}

class AnimationController extends GetxController with SingleGetTickerProviderMixin {
  Animation animation;
  AnimationController _animationController;

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

    _animationController = AnimationController(
        vsync: this, duration: Duration(seconds: 2));
    _animationController.repeat(reverse: true);

    animation = Tween(begin: 2.0, end: 15.0)
        .animate(_animationController)
          ..addListener(() => update());
  }

  @override
  void onReady() {
    super.onReady();
  }

  @override
  void onClose() {
    super.onClose();

    _animationController.dispose();
  }
}

2:在view中使用了这个widget

child: CustomAnimatedWidget();

到目前为止,一切正常。 但我想更新blur, spread & duration ,其中:更新CustomAnimatedWidget

final double blur;
  final double spread;
  final int duration;
  CustomAnimatedWidget({this.blur, this.spread, this.duration});

  ...
      builder: (_) => ...
      ...
      initState: (s) {
        _.blur.value = blur;
        _.spread.value = spread;
        _.duration.value = duration;
      },
  ...

更新AnimationController

Rx<double> blur = 2.0.obs;
  Rx<double> spread = 15.0.obs;
  Rx<int> duration = 2.obs;

并使用/调用CustomAnimationWidget使用:

child: CustomAnimatedWidget(duration: 4, blur: 2, spread: 10);

但不知道如何将它与_animationController & _animation一起使用,因为它们在onInit中被调用。

请分享您的解决方案,谢谢。

我使用GetTickerProviderStateMixin扩展GetxController ,然后通过以下代码制作了AnimationControllerCurvedAnimation

late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: false);

  late final Animation<double> animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.ease,
  );

之后,我刚刚创建了我的 CustomGetxController 的 object,就像这样 final _customController = Get.put(CustomGetxController()); 然后我这样称呼它:

 FadeTransition(
            opacity: driverController.animation,
            child:const Text('My Flashing Text')
          ),

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM