如何制作从应用程序按钮到应用程序屏幕一半的自定义动画容器

Question

预期行为

我试过这段代码，但它给了我来自左侧和奇怪动画的完全不同的结果

double val = 0;
    @override
      Widget build(BuildContext context) {
    
        return   Stack(
          children: [
    
            Container(
              height: 400,
              color: Colors.red,
            ),
            TweenAnimationBuilder(
                duration: const Duration(milliseconds: 150),
                tween: Tween<double>(begin: 0 , end:  val) ,
    
                builder: (BuildContext context, double? value, Widget? child) {
    
                  return (
                      Transform(
                          alignment: Alignment.center,
                          transform: Matrix4.identity()
                            ..setEntry(3, 2, 0.001)
                            ..setEntry(0, 3, 200 * value!)
                            ..rotateY((pi/6)*value),
                          child:  DefaultTabController(
                              length: 5,
                              child: Scaffold(
    
    
                                  body:   Center(
                                    child: Container(
                                      color: Colors.yellowAccent,
                                      child: IconButton(
                                        onPressed: () {
                                          setState(() {
                                            setState(() {
                                              val == 0 ? val = 1 : val = 0 ;
                                            });
                                          });
                                        },
                                        icon: Text('tab me'),
    
                                      ),
                                    ),
                                  )
    
                              )
                          )
                      )
                  );
    
                }
            )
          ],
        );
    
    
    
      }

我也只需要红色容器，它是从下到上动画的那个，但我不知道为什么主屏幕也是动画的..我不需要它从来没有动画..

欢迎大家提出任何建议..谢谢

Answer 1

您可以使用 AnimatedContainer().

而不是自定义动画

创建一个类似于 selected 的布尔值，它将告诉动画容器何时关闭以及何时打开容器。使用 setState 可以切换动画。

将你的 AnimatedContainer() 与 Align() 对齐并给出 alignment: Alignment.bottomCenter。并给出 height:0 未被选中，当被选中时使用 MediaQuery.of(context)

给出屏幕的一半高度

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ElevatedButton(
        onPressed: () {
          setState(() {
            selected = !selected;
          });
        },
        child: Text("Tap Me!!"),
      ),
      Spacer(),
      GestureDetector(
        onTap: () {
          setState(() {
            selected = !selected;
          });
        },
        child: Align(
          alignment: Alignment.bottomCenter,
          child: AnimatedContainer(
            width: double.infinity,
            height: selected ? MediaQuery.of(context).size.height / 2 : 0,
            color: selected ? Colors.red : Colors.blue,
            alignment:
                selected ? Alignment.center : AlignmentDirectional.topCenter,
            duration: const Duration(seconds: 2),
            curve: Curves.fastOutSlowIn,
            child: const FlutterLogo(size: 75),
          ),
        ),
      )
    ]);
  }
}

您可以在 dartpad 中尝试相同的代码 here

如何制作从应用程序按钮到应用程序屏幕一半的自定义动画容器

How to make custom animated Container from button of the app till half of the app screen

animation

dart

flutter