flutter - Flutter FadeIn/FadeOut animation together
问题描述
in this simple sample code i want to have fadeIn and fadeOut animation together, but in this code fadeIn work only and reverse
not work, how can i have both of them together?
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,
),
),
),
),
);
}
}
解决方案
Alright, I am assuming, you are looking to get a FadeIn & FadeOut animation on your container.
There are a few things you need to change.
- The
FadeTransition
class should not take theanimation
for opacity, rather it should be the_fadeInFadeOut
variable - The animation starts, when you call the
animation.forward()
rather thananimation.repeat()
(Since in your case, you also need to reverse the animation, always start with the animation.forward() call).
Make sure to use the addStatusListener()
method instead of addListener()
since you get much better control over your states.
So, all of this put together, below is the working code to make your animation work.
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,
),
),
),
),
);
}
}
推荐阅读
- html - FontAwesome 图标溢出其容器
- css - 为什么css溢出隐藏在这种情况下不起作用
- react-native - 在这种情况下如何正确调用 this.setState() ?
- python-3.x - 是否有支持标识符和多行值中的冒号的配置文件格式?
- neural-network - 考虑到步幅和输入大小,这些卷积是如何实现的?
- ffmpeg - FFMPEG -t 输出的长度比它应该的长吗?
- android - ArrayAdapter 上的方法 getView 没有被调用?
- mysql - 遍历此 sql 表树的最有效算法是什么?
- asp.net-core-webapi - 如何使用 opendidict 对客户端凭据流和密码流进行授权?
- ansible - 需要ansible playbook来比较Linux上从一台服务器到另一台服务器的文件