[英]Flutter GetX: Animation with GetxController
I'm trying GetX for my new project and tried to use AnimationController which is inspired this comment .我正在为我的新项目尝试 GetX,并尝试使用受此评论启发的 AnimationController。 Everything works fine with default value for Tween -> blur & spread
& AnimationController -> duration
. Tween -> blur & spread
& AnimationController -> duration
的默认值一切正常。
What I'm doing:我在做什么:
1: Created an widget
with corresponding controller
(controller is binded through initialBinding
of GetMaterialApp). 1:创建一个对应controller
的widget
(控制器通过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: Used this widget
inside view
. 2:在view
中使用了这个widget
。
child: CustomAnimatedWidget();
Till now, everything is working fine.到目前为止,一切正常。 But I want to update blur, spread & duration
, with: updating 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;
},
...
updating AnimationController
:更新AnimationController
:
Rx<double> blur = 2.0.obs;
Rx<double> spread = 15.0.obs;
Rx<int> duration = 2.obs;
and using/calling the CustomAnimationWidget
using:并使用/调用CustomAnimationWidget
使用:
child: CustomAnimatedWidget(duration: 4, blur: 2, spread: 10);
but don't know how to use it with _animationController
& _animation
because they are called in onInit
.但不知道如何将它与_animationController
& _animation
一起使用,因为它们在onInit
中被调用。
Please share your solutions, thanks.请分享您的解决方案,谢谢。
I Extended GetxController
with GetTickerProviderStateMixin
and then make a AnimationController
and CurvedAnimation
by code below:我使用GetTickerProviderStateMixin
扩展GetxController
,然后通过以下代码制作了AnimationController
和CurvedAnimation
:
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,
);
After that i just created object of my CustomGetxController like this final _customController = Get.put(CustomGetxController());
之后,我刚刚创建了我的 CustomGetxController 的 object,就像这样 final _customController = Get.put(CustomGetxController());
then i called it like this:然后我这样称呼它:
FadeTransition(
opacity: driverController.animation,
child:const Text('My Flashing Text')
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.