我正在创建一个仪表板,其中包含两个小部件(文本和两个容器)的Tween动画。但是,我想使两个Container的不透明度从不可见变为缓慢变化...所以我使用了AnimatedOpacity。但是我不知道该怎么做...
任何帮助将不胜感激..
class _IntroState extends State<Intro> with SingleTickerProviderStateMixin {
Animation animation;
AnimationController animationController;
@override
void initState() {
super.initState();
animationController = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
);
animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation(
parent: animationController, curve: Curves.fastOutSlowIn));
animationController.forward();
}
@override
Widget build(BuildContext context) {
bool _visible = false;
final double width = MediaQuery.of(context).size.width;
return AnimatedBuilder(
animation: animationController,
builder: (BuildContext context, Widget child) {
return Scaffold(
//BODDY
body: ListView(
hildren:<Widget>[
new Stack(
children: <Widget>[
new Transform(
//ANIMATED OPACITY
new AnimatedOpacity(
opacity: _visible ? 0.0 : 1.0,
duration: Duration(milliseconds: 500),
child: new Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12.0),
child: new Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
child: Column(
children: <Widget>[
//THIS THE CONTAINER
new Container(. . .),
new Container(. . .)
最佳答案
代替AnimatedOpacity
,使用FadeTransition
小部件。这使您可以手动控制动画:
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: animationController.drive(CurveTween(curve: Curves.easeOut)),
child: ...,
);
}
关于dart - Flutter-如何自动启用AnimatedOpacity?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53959601/