如何解决如何在特定点停止动画?
我已经创建了此动画来显示配置文件,并且我希望在配置文件图片动画完成后且以下文本的不透明度开始改变之前停止该动画。现在,我知道个人资料图片的动画从0.3变为0.6,因此我想将动画停止在0.6。 这是代码。
import 'package:Flutter/cupertino.dart';
import 'package:Flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class profile extends StatefulWidget {
@override
_profileState createState() => _profileState();
}
class _profileState extends State<profile> with SingleTickerProviderStateMixin{
AnimationController _animationController;
Animation<double> barHeight;
Animation<double> avatarSize;
Animation<double> textOpacity;
@override
void initState() {
// Todo: implement initState
super.initState();
_animationController = AnimationController(vsync: this,duration: Duration(seconds: 5));
_animationController.forward();
barHeight = Tween(begin: 0.0,end: 250.0).animate(CurvedAnimation(parent:_animationController,curve:
Interval(0.1,0.3,curve:Curves.easeInOutQuint)));
avatarSize = Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent:_animationController,curve:
Interval(0.3,0.6,curve:Curves.easeInOutCirc)));
textOpacity = Tween(begin: 0.0,curve:
Interval(0.6,1,curve:Curves.easeInOutCirc)));
}
Widget _buildanimation(BuildContext context,Widget child,Size size){
return Container(
decoration: Boxdecoration(
image: decorationImage(
image: Assetimage('assets/bgi1.png'),fit: BoxFit.fill
)
),child: Column(
children: <Widget>[
SizedBox(height: 250,child: Stack(
overflow: Overflow.visible,children: <Widget>[
Opacity(
opacity: 0.9,child: Container(
height: barHeight.value,width: double.infinity,decoration: Boxdecoration(
image: decorationImage(
image: Assetimage('assets/books.jpg'),fit: BoxFit.fitWidth
)
),),Positioned(
top: 200,left: size.width/2-70,child: Transform(
alignment: Alignment.center,transform: Matrix4.diagonal3Values(avatarSize.value,avatarSize.value,1.0),child: Container(
width: 120,height: 120,decoration: Boxdecoration(
borderRadius: BorderRadius.circular(100),child: CircleAvatar(
backgroundImage: Assetimage('assets/profile.jpg'),],Padding(
padding: const EdgeInsets.all(12),child: Column(
children: <Widget>[
SizedBox(height: 60,Opacity(opacity:textOpacity.value,child: Text(
"Gillian Flynn",style: GoogleFonts.lobster(fontSize: 50,color: Colors.blue[900]),)),SizedBox(height: 40,child: Padding(
padding: const EdgeInsets.all(10.0),child: Text(
"Gillian Flynn was born in Kansas City,Missouri to two community-college
professors—her mother taught reading; her father,film. Thus she spent an inordinate amount of her
youth nosing through books and watching movies. She has happy memories of having A Wrinkle in Time
pried from her hands at the dinner table,and also of seeing Alien,Psycho and Bonnie and Clyde at a
questionable age (like,seven). It was a good childhood.",style: GoogleFonts.kanit(fontSize: 15),))
],)
),);
}
@override
void dispose() {
// Todo: implement dispose
super.dispose();
_animationController.dispose();
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
body: AnimatedBuilder(
animation: _animationController,builder: (context,child)=> _buildanimation(context,child,size),)
);
}
}
之所以问这个问题,是因为我想知道是否可以使用一个animationcontroller本身单独执行特定的动画间隔。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。