我想用GetxController和GetView在flutter中实现动画,以控制每个小部件中的动画,这是我的Getx控制器:
class TestAnimationController extends GetxController
with GetTickerProviderStateMixin {
late AnimationController anim;
late Animation<double> animation;
@override
void onInit() {
super.onInit();
initAnimation();
anim.forward();
}
void initAnimation() {
anim = AnimationController(
duration: Duration(seconds: 1),
vsync: this,
);
animation = Tween<double>(begin: 1, end: 0).animate(
CurvedAnimation(
parent: anim,
curve: Interval(0.0, 1.0, curve: Curves.linear),
),
);
}
}
我的GetView类是:
class TestAnimationHome extends GetView<TestAnimationController> {
const TestAnimationHome({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: controller.animation.value + 100,
height: controller.animation.value + 100,
color: Colors.amber,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
controller.anim.forward();
},
child: Icon(
Icons.play_circle,
),
),
);
}
}
我谷歌了很多,做每一步提到,但我的动画不开始,我不知道我做错了!
2条答案
按热度按时间6l7fqoea1#
你面临这个问题是因为你没有告诉UI显式地绘制(例如setstate)。你可以在GetX中看到下面的实现。
我在UI部分使用了addListener函数沿着GetBuilder
希望能回答你的问题😄
anauzrmj2#
除了我从@cavin-macwan的回答中学到的东西,我想提一下我的一些错误,让任何有同样问题的人更好地理解。
首先,我们需要
GetBiulder
来跟踪控制器中的任何更新,当您将“addListener”添加到动画中并使用它更新控制器时,GetBuilder
将正确更新UI。另一个错误是
Tween<double>(begin: 1, end: 0)
,导致Container
的width:
仅改变1 px,因此您无法看到实际发生的变化。将Tween<double>(begin: 1, end: 0)
改变为Tween<double>(begin: 0, end: 100)
或将Container
的尺寸从width: c.animation.value + 100,
改变为width: c.animation.value * 100,
。在
floatingActionButton
中不需要controller.update();
,因为addListener
在控制器中的任何AnimationController滴答声之后执行此操作。与在
floatingActionButton
中使用GetBuilder
相比,我更喜欢使用extends GetView<TestAnimationController>
,因为代码较少。