[英]Flutter GetX: Animation with GetxController
我正在为我的新项目尝试 GetX,并尝试使用受此评论启发的 AnimationController。 Tween -> blur & spread
& AnimationController -> duration
的默认值一切正常。
我在做什么:
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:在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
,然后通过以下代码制作了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,
);
之后,我刚刚创建了我的 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.