时间戳

首页 > 解决方案 > 动画的不规则行为

flutter - 动画的不规则行为

问题描述

我试图在我的项目中加入动画，其中会有一堆蓝色容器和黄色容器，当点击屏幕时，上面的容器会向下滑动，再次点击时会向上滑动（上面的容器是黄色的），非常像背景脚手架

代码

 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();
  }

现在，每当我重新启动应用程序或打开应用程序时，黄色容器只会上下上下而没有任何点击，它只会在点击后停止

标签： flutteranimationcontroller

解决方案

根据文档：.repeat方法 Starts running the animation in the forward direction, and restarts the animation when it completes.

要解决此问题，请删除..repeat附加到animationControlller对象的方法。我添加了一个演示代码，说明它应该是怎样的：

 @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController =
        AnimationController(duration: Duration(milliseconds: 250), vsync: this);
  }

推荐阅读