听动画来完成 [英] Listen for an animation to complete
问题描述
我想在动画制作完成后执行一个动作。我尝试添加一个statusListener,但这对我不起作用。我的代码如下所示:
I'm trying to perform an action after my animation finishes. I tried adding a statusListener but that is not working for me. My code looks like this:
@override
void initState() {
super.initState();
_controller = new AnimationController(
duration: new Duration(milliseconds: 500),
vsync: this,
)..addStatusListener((AnimationStatus status) {
print("Going");
if (status.index == 3 && spins > 0) { // AnimationStatus index 3 == completed animation
_controller.duration = new Duration(milliseconds: speed - 50);
_controller.forward(from: _controller.value == null ? 0.0 : 1 - _controller.value);
spins--;
print(speed);
}
});
}
print(Going);
永远不会执行,但是我的动画确实会结束。怎么了?
The print(Going);
never gets executed but my animation does end. What is going wrong?
/// ---编辑--- ///
我正在使用 AnimatedBuilder
,该部分代码如下:
I'm using an AnimatedBuilder
, that part of the code looks like this:
child: new AnimatedBuilder(
animation: _controller,
child: new Image.network(widget.url),
builder: (BuildContext context, Widget child) {
return new Transform.rotate(
angle: _controller.value * 2.0 * math.PI,
child: child,
);
},
),
推荐答案
根据您的评论进行编辑,我看着进入AnimationBuilder。修改 docs 中的示例,我想到了这个可行的解决方案:
Reacting to your comment and edit I looked into the AnimationBuilder. Adapting the example in the docs I came up with this working solution:
class Spinner extends StatefulWidget {
@override
_SpinnerState createState() => new _SpinnerState();
}
class _SpinnerState extends State<Spinner> with SingleTickerProviderStateMixin {
AnimationController _controller;
CurvedAnimation _animation;
@override
void initState() {
super.initState();
_controller = new AnimationController(
duration: const Duration(seconds: 5),
vsync: this,
)..forward();
_animation = new CurvedAnimation(
parent: _controller,
curve: Curves.linear,
)..addStatusListener((AnimationStatus status) {
if (status == AnimationStatus.completed)
print('completed');
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new AnimatedBuilder(
animation: _animation,
child: new Container(width: 200.0, height: 200.0, color: Colors.green),
builder: (BuildContext context, Widget child) {
return new Transform.rotate(
angle: _controller.value * 2.0 * 3.1415,
child: child,
);
},
);
}
}
如您所见,我将控制器用作父级动画,然后将其用作AnimationBuilder的动画。希望对您有所帮助。
As you can see, I used the controller as parent to an animation, which was than used as animation for the AnimationBuilder. Hope it helps.
这篇关于听动画来完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!