Question

我尝试将动画合并到我的项目中，其中将有一堆蓝色容器和黄色容器，当轻按屏幕时，上部容器会向下滑动，而再次轻击时会向上滑动（上部是黄色），非常类似于背景支架

代码

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

现在，每当我重新启动应用程序或打开应用程序时，黄色容器就在没有任何轻敲的情况下不断地上下移动，它只会在轻击后停止

Answer 1

根据文档： .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);
  }

动画的不规则行为

1 个答案: