[英]Multiple Flutter animation not working one after the other
I am new to flutter, at the moment I am trying to make a simple app where when the APP is opened a Text appears with fadeIn
and changes its position from bottom to top
.我是 flutter 的新手,目前我正在尝试制作一个简单的应用程序,当打开应用程序时,会出现一个带有淡入淡出的文本并将其
fadeIn
position from bottom to top
。 Yes, there are two animations
which I want to Transit
.是的,我想要
Transit
有两个animations
。 The first one is FadeIn
after it is completed goes and carries on with the next animation
which is Position Transition
which changes the Vertical
position of the Text from 400.0
to 200.0 pixels.
第一个是
FadeIn
,完成后继续执行下一个animation
,即Position Transition
,它将文本的Vertical
400.0
从 400 200.0 pixels.
I was able to achieve the fadeIn process but position one is not being applied.我能够实现淡入淡出过程,但没有应用 position 一个。 First I want the FadeIn TextAnimation to start after it's done I want to start the PositionAnimation, not at the same time but one after the other when the animations complete.
首先,我希望 FadeIn TextAnimation 在完成后启动我想启动 PositionAnimation,不是同时启动,而是在动画完成后一个接一个地启动。
Here is the code:这是代码:
class _SplashScreenState extends State<SplashScreen>
with TickerProviderStateMixin {
AnimationController animationController;
double position = 400.0;
Animation<double> _animation;
Tween<double> tween;
@override
void initState() {
super.initState();
animationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 700),
);
_animation = CurvedAnimation(
parent: animationController,
curve: Curves.easeIn,
);
tween = Tween(begin: 400, end: 200);
animationController.forward();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.amber,
body: FadeTransition(
opacity: _animation,
child: Padding(
padding: EdgeInsets.symmetric(
vertical:_animation.isCompleted? tween : position,
horizontal: 180.0),
child: Text(
'My Life',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30.0,
color: Colors.white70,
letterSpacing: 2.0),
),
),
),
);
}
@override
void dispose() {
animationController.dispose();
super.dispose();
}
}
Any expertise, Since I am new I am not sure what I did wrong.任何专业知识,由于我是新手,我不确定我做错了什么。 Please guide me, anyone.
请指导我,任何人。
Here is the updated code which I have tried today but still I am not getting the result:这是我今天尝试过的更新代码,但我仍然没有得到结果:
class _SplashScreenState extends State<SplashScreen>
with TickerProviderStateMixin {
AnimationController animationControllerFade;
AnimationController animationControllerPost;
double position = 400.0;
FadeTransition fadeTransition;
Animation<double> animation;
int i = 0;
@override
void initState() {
super.initState();
animationControllerFade = AnimationController(
vsync: this,
duration: Duration(milliseconds: 700),
);
animationControllerPost = AnimationController(
vsync: this,
duration: Duration(milliseconds: 700),
);
animation = CurvedAnimation(
parent: animationControllerFade,
curve: Curves.easeIn,
);
animationControllerFade.forward();
}
@override
Widget build(BuildContext context) {
Scaffold sc;
sc = Scaffold(
backgroundColor: Colors.amber,
);
fadeTransition = FadeTransition(
opacity: animation,
child: paddingOwn(position),
);
animationControllerFade.addStatusListener((status) {
if (status == AnimationStatus.completed) {
animationControllerPost.forward();
sc = Scaffold(
body: TweenAnimationBuilder(
curve: Curves.easeIn,
duration: Duration(milliseconds: 700),
tween: Tween<double>(begin: 400.0, end: 200.0),
builder: (BuildContext context, double val, Widget child) {
return Positioned(child: paddingOwn(val));
},
),
);
}
else {
sc = Scaffold(body: fadeTransition);
}
});
return sc;
}
Widget paddingOwn(double val) {
return Padding(
padding: EdgeInsets.symmetric(
vertical: val,
horizontal: 180,
),
child: Text(
'My Life',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30.0,
color: Colors.white70,
letterSpacing: 2.0),
),
);
}
@override
void dispose() {
animationControllerFade.dispose();
animationControllerPost.dispose();
super.dispose();
}
}
still not result.仍然没有结果。
If you want to get the position transition, you need to use SlideTransition
.如果要获得 position 过渡,则需要使用
SlideTransition
。
Also, you need to animate the Tween
in order to get the values interpolated properly.此外,您需要对
Tween
进行动画处理,以便正确插值。
I changed a little your code in order to center the text and animate it from there.我对您的代码进行了一些更改,以使文本居中并从那里对其进行动画处理。 Anyway, just keep in mind that
SlideTransition
works with Offsets in a relative way from the size of the child无论如何,请记住,
SlideTransition
以相对于孩子大小的方式与 Offsets 一起使用
Now, you should be able to adapt this code to the final result you want to achieve:现在,您应该能够将此代码调整为您想要实现的最终结果:
class _SplashScreenState extends State<SplashScreen> with TickerProviderStateMixin {
AnimationController _fadeAnimationController;
AnimationController _slideAnimationController;
double position = 400.0;
Animation<double> _fadeAnimation;
Animation<Offset> _slideAnimation;
@override
void initState() {
super.initState();
_fadeAnimationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 700),
);
_slideAnimationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 700),
);
_fadeAnimation = CurvedAnimation(
parent: _fadeAnimationController,
curve: Curves.easeIn,
);
_slideAnimation = Tween(begin: Offset(0, 0), end: Offset(0, -3)).animate(CurvedAnimation(
parent: _slideAnimationController,
curve: Curves.easeInOut,
));
_play();
}
Future<void> _play() async {
try {
await _fadeAnimationController.forward().orCancel;
await _slideAnimationController.forward().orCancel;
} on TickerCanceled {
//Handle if animation was canceled for whatever reason if you need it
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.amber,
body: Center(
child: SlideTransition(
position: _slideAnimation,
child: FadeTransition(
opacity: _fadeAnimation,
child: Text(
'My Life',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0, color: Colors.white70, letterSpacing: 2.0),
),
),
),
),
);
}
@override
void dispose() {
_fadeAnimationController.dispose();
_slideAnimationController.dispose();
super.dispose();
}
}
Update:更新:
You are not seeing changes with your padding because you have two mistakes:您没有看到填充的变化,因为您有两个错误:
symmetric
, that adds the same margin from both sides.symmetric
,这会从两侧添加相同的边距。 To solve the tween thing, you need to add something like this:要解决补间问题,您需要添加如下内容:
tween = Tween(begin: 400, end: 200).animate(animationController);
To solve the padding thing, you can use only
, to apply the padding only in one side:要解决填充问题,您可以使用
only
, 仅在一侧应用填充:
padding: EdgeInsets.only(top: tween)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.