Flutter 一起抖动淡入淡出/淡出动画

在这个简单的示例代码中，我希望将fadeIn和fadeOut动画放在一起，但是在这个代码中，fadeIn只起作用，而

reverse

不起作用，如何将它们放在一起

import 'package:flutter/material.dart';

void main()=>runApp(MaterialApp(home: FadeTransitionSample(),));
class FadeTransitionSample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _Fade();
}

class _Fade extends State<FadeTransitionSample> with TickerProviderStateMixin {
  AnimationController animation;
  Animation<double> _fadeInFadeOut;

  @override
  void initState() {
    super.initState();
    animation = AnimationController(vsync: this, duration: Duration(seconds: 3),);
    _fadeInFadeOut = Tween<double>(begin: 0.0, end: 0.1).animate(animation);

    animation.addListener((){
      if(animation.isCompleted){
        animation.reverse();
      }else{
        animation.forward();
      }
    });
    animation.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: FadeTransition(
            opacity: animation,
            child: Container(
              color: Colors.green,
              width: 100,
              height: 100,
            ),
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MaterialApp（主页：FadeTransitionSample（），）；
类FadeTransitionSample扩展StatefulWidget{
@凌驾
状态createState（）=>_Fade（）；
}
类_Fade使用TickerProviderStateMixin扩展状态{
动画控制器动画；
动画(fadeInFadeOut),；
@凌驾
void initState（）{
super.initState（）；
animation=AnimationController（vsync:this，duration:duration（秒数：3））；
_fadeInFadeOut=Tween（开始：0.0，结束：0.1）。设置动画（动画）；
animation.addListener（）{
如果（animation.isCompleted）{
animation.reverse（）；
}否则{
animation.forward（）；
}
});
动画。重复（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：容器(
儿童：中心(
孩子：FadeTransition(
不透明度：动画，
子：容器(
颜色：颜色。绿色，
宽度：100，
身高：100，
),
),
),
),
);
}
}

好吧，我假设，您希望在容器上获得一个FadeIn&FadeOut动画

有几件事你需要改变

FadeTransition

类不应将

动画

作为不透明度，而应是

\u fadeInFadeOut

变量

当您调用

animation.forward（）

而不是

animation.repeat（）

（因为在您的情况下，还需要反转动画，所以始终从animation.forward（）调用开始）时，动画开始

确保使用

addStatusListener（）

方法而不是

addListener（）

，因为您可以更好地控制自己的状态

所有这些加在一起，下面是使动画工作的工作代码

import 'package:flutter/material.dart';

void main()=>runApp(MaterialApp(home: FadeTransitionSample(),));
class FadeTransitionSample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _Fade();
}

class _Fade extends State<FadeTransitionSample> with TickerProviderStateMixin {
  AnimationController animation;
  Animation<double> _fadeInFadeOut;

  @override
  void initState() {
    super.initState();
    animation = AnimationController(vsync: this, duration: Duration(seconds: 3),);
    _fadeInFadeOut = Tween<double>(begin: 0.0, end: 0.5).animate(animation);

    animation.addStatusListener((status){
      if(status == AnimationStatus.completed){
        animation.reverse();
      }
      else if(status == AnimationStatus.dismissed){
        animation.forward();
      }
    });
    animation.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: FadeTransition(
            opacity: _fadeInFadeOut,
            child: Container(
              color: Colors.green,
              width: 100,
              height: 100,
            ),
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MaterialApp（主页：FadeTransitionSample（），）；
类FadeTransitionSample扩展StatefulWidget{
@凌驾
状态createState（）=>_Fade（）；
}
类_Fade使用TickerProviderStateMixin扩展状态{
动画控制器动画；
动画(fadeInFadeOut),；
@凌驾
void initState（）{
super.initState（）；
animation=AnimationController（vsync:this，duration:duration（秒数：3））；
_fadeInFadeOut=Tween（开始：0.0，结束：0.5）。设置动画（动画）；
animation.addStatusListener（（状态）{
如果（状态==AnimationStatus.completed）{
animation.reverse（）；
}
else if（状态==AnimationStatus.discomered）{
animation.forward（）；
}
});
animation.forward（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：容器(
儿童：中心(
孩子：FadeTransition(
不透明度：_fadeInFadeOut，
子：容器(
颜色：颜色。绿色，
宽度：100，
身高：100，
),
),
),
),
);
}
}

谢谢。如何设置前进和后退之间的延迟？目前，FadeIn和FadeOut的延迟相同。如果希望两个动作的持续时间不同，则必须创建单独的动画并使用它们。不能用简单的反向方法。还有其他调用，如animateTo（）和animateBack（），您可以利用它们。非常感谢，亲爱的，它可以工作：）