链接可在相同属性上工作的单独动画 [英] Chaining seperate animations that work on the same properties
问题描述
我看过错开动画来链接动画,但是在那里他们将一种动画用于一个小部件的属性,例如一个不透明的动画控制着淡入,但是如果我想先淡入然后再淡出相同的小部件怎么办?我的意思是我已经创建了淡入淡出的动画,并用于小部件的不透明度值,如下所示:
I have looked at Staggered animations for chaining animations but there they use one animation for one widget's properties, e.g. a opacity animation is controlling the fade in, but what if I want to first fade in and then later fade out that same widget? I mean I already have created the fade in animation and that is used for the widget opacity value like this:
_opacityDontWorry = Tween(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(parent: _animationController, curve: Interval(0.0, 0.75, curve: Curves.easeIn)),
);
所以这两个现在像这样绑定在一起:
so those two are now bound together like this:
Opacity(
opacity: _opacityDontWorry.value,
child: Text("Don't worry"),
)
这项工作正常,我的不透明度逐渐淡入,但是淡入后我希望它在短暂的停顿后淡出,但是我该怎么做呢?我是否要创建一个新的Tween并用它覆盖_opacityDontWorry,或者?我什至在正确的路径上,如何链接改变小部件上相同属性的多个动画?
This work just fine and my Opacity get faded in, but after it is faded in I would like it to fade out after a short pause, but how can I do this? Do I create a new Tween and overwrite the _opacityDontWorry with that, or? Am I even on the right path here, how do I chain multiple animations that alter the same properties on a widget?
谢谢
索伦
推荐答案
您可以在Animation
上使用addStatusListener
.检查动画何时完成,然后在AnimationController
上调用reverse()
.
You can use addStatusListener
on your Animation
. Check when the animation is completed and then call reverse()
on your AnimationController
.
如果需要,可以在Future.delayed()
内调用reverse()
进行暂停.
If you want to, you can call reverse()
inside a Future.delayed()
for making a pause.
我为您制作了此示例:
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
AnimationController _animationController;
Animation _opacityDontWorry;
@override
void initState() {
super.initState();
_animationController = AnimationController(duration: Duration(seconds: 1), vsync: this);
_opacityDontWorry = Tween(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeIn),
)..addStatusListener((status) {
if (status == AnimationStatus.completed) {
Future.delayed(Duration(seconds: 3), () {
_animationController.reverse();
});
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton.extended(
label: Text('Animate'),
onPressed: () => _animationController.forward(),
),
body: Center(
child: AnimatedBuilder(
animation: _opacityDontWorry,
builder: (context, widget) {
return Opacity(
opacity: _opacityDontWorry.value,
child: Text("Don't worry"),
);
},
),
),
);
}
}
更新
如果需要播放此动画,然后再调用另一个动画,则可以将不透明度值提取到变量中.然后根据需要从多个连续动画中更新该值.
In case you need to play this animation, and call another one after that, you can extract the opacity value to a variable. Then update that value from as many consecutive animations as you need.
_firstAnimation = Tween(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(parent: _animationController, curve: Interval(0.0, 0.20, curve: Curves.easeIn)),
)..addListener(() {
setState(() => _opacity = _firstAnimation.value);
});
// Leave an interval pause if you need
_secondAnimation = Tween(
begin: 1.0,
end: 0.0,
).animate(
CurvedAnimation(parent: _animationController, curve: Interval(0.40, 0.60, curve: Curves.easeIn)),
)..addListener(() {
setState(() => _opacity = _secondAnimation.value);
});
在窗口小部件的不透明度属性中,不要使用_firstAnimation.value
而是使用_opacity
.
In your widget's opacity property, instead of using _firstAnimation.value
use _opacity
.
这篇关于链接可在相同属性上工作的单独动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!