动画的不规则行为
Irregular behavior of animation
我尝试在我的项目中加入动画,其中会有一堆蓝色容器和黄色容器,当点击屏幕时,上面的容器会向下滑动,再次点击时会向上滑动(上面的是黄色的) ), 非常像 Backdrop Scaffold
代码
AnimationController _animationController;
@override
void initState() {
// TODO: implement initState
super.initState();
_animationController=AnimationController(
duration: Duration(milliseconds: 250),
vsync: this
)..repeat();
}
void toggle()=>_animationController.isDismissed? _animationController.forward()
:_animationController.reverse();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
toggle();
},
child: AnimatedBuilder(
animation: _animationController,
builder: (_,__){
double slide=1.0-_animationController.value*0.3;
double align=(MediaQuery. of(context). size. height-150.0
)*_animationController.value;
return Stack(
children: <Widget>[
Container(
color: Colors.blue,
),
Transform(
transform: Matrix4.identity()
//..scale(slide)
..translate(0.0,align),
alignment: Alignment.bottomCenter ,
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(12.0)
),
),
)
],
);
},
),
);
@override
void dispose() {
// TODO: implement dispose
_animationController.dispose();
super.dispose();
}
现在,每当我重新启动应用程序或打开应用程序时,黄色容器会不断上下不断上升而无需任何点击,只有在点击后它才会停止
根据文档:
.repeat
方法
Starts running the animation in the forward direction, and restarts the animation when it completes.
要解决此问题,请删除附加到 animationControlller
对象的 ..repeat
方法。我添加了它应该如何的演示代码:
@override
void initState() {
// TODO: implement initState
super.initState();
_animationController =
AnimationController(duration: Duration(milliseconds: 250), vsync: this);
}
我尝试在我的项目中加入动画,其中会有一堆蓝色容器和黄色容器,当点击屏幕时,上面的容器会向下滑动,再次点击时会向上滑动(上面的是黄色的) ), 非常像 Backdrop Scaffold
代码
AnimationController _animationController;
@override
void initState() {
// TODO: implement initState
super.initState();
_animationController=AnimationController(
duration: Duration(milliseconds: 250),
vsync: this
)..repeat();
}
void toggle()=>_animationController.isDismissed? _animationController.forward()
:_animationController.reverse();
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
toggle();
},
child: AnimatedBuilder(
animation: _animationController,
builder: (_,__){
double slide=1.0-_animationController.value*0.3;
double align=(MediaQuery. of(context). size. height-150.0
)*_animationController.value;
return Stack(
children: <Widget>[
Container(
color: Colors.blue,
),
Transform(
transform: Matrix4.identity()
//..scale(slide)
..translate(0.0,align),
alignment: Alignment.bottomCenter ,
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(12.0)
),
),
)
],
);
},
),
);
@override
void dispose() {
// TODO: implement dispose
_animationController.dispose();
super.dispose();
}
现在,每当我重新启动应用程序或打开应用程序时,黄色容器会不断上下不断上升而无需任何点击,只有在点击后它才会停止
根据文档:
.repeat
方法
Starts running the animation in the forward direction, and restarts the animation when it completes.
要解决此问题,请删除附加到 animationControlller
对象的 ..repeat
方法。我添加了它应该如何的演示代码:
@override
void initState() {
// TODO: implement initState
super.initState();
_animationController =
AnimationController(duration: Duration(milliseconds: 250), vsync: this);
}