如何在flutter上制作动画

Question

我正在Flutter上申请。我的屏幕上有 2 个大容器。这些容器是可点击的，它们允许我转到其他页面。当我单击时，我希望容器按顺序从左到左移动，并且我希望新页面从右到左出现在屏幕上。但我不知道该怎么做。我对动画不太了解，我只知道如何在 getx 上使用动画。我想知道在哪里可以学习如何创建自己的动画。

我的主屏幕上的代码：

class ReqHomePage extends StatelessWidget {
  const ReqHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      backgroundColor: backgroundcolor,
      body: SafeArea(
        child: Stack(
          children:[
            CustomPaint(painter: BackgroundPainter(),child: SizedBox(width: Get.width, height: Get.height,),),
            Column(
            children: [
              Row(
              children: [
                SizedBox(
                height: Get.height *0.08,
                width: Get.width *0.5, 
                child:  const Padding(
                  padding: EdgeInsets.only(left: 20, top: 25),
                  child: Text('Name Surname'),
                ),),
                SizedBox(
                  height: Get.height *0.08,
                  width: Get.width *0.5, 
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                    IconButton(onPressed: (){}, icon:  const Icon(Icons.language),),
                    IconButton(onPressed: (){}, icon: const  Icon(Icons.logout),)
                  ]),),
                ],),
              const Divider(thickness: 2,),
              const SizedBox(height: 50,),
              BigButtons(backgroundImage: 'assets/form.jpg' ,ontap: (){Get.to(const ReqFormCreate(),);}, text: 'BlaBla'),
              const SizedBox(height: 50,),
              BigButtons(backgroundImage: 'assets/documents2.jpg', text: 'BlaBlaBla', ontap: (){}),
              const SizedBox(height: 50,),
              const egeTechnoTextButton()
            ],
          ),
        ]),
      ),
    );
  }
}

找了很多地方但更迷茫

Answer 1

这是自定义淡入淡出动画小部件

class FadeInAnimation extends StatefulWidget {
  const FadeInAnimation({super.key, required this.child, required this.delay});

  final Widget child;
  final double delay;

  @override
  State<FadeInAnimation> createState() => _FadeInAnimationState();
}

class _FadeInAnimationState extends State<FadeInAnimation>
    with TickerProviderStateMixin {
  late AnimationController controller;
  late Animation<double> animation;
  late Animation<double> animation2;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: Duration(milliseconds: (500 * widget.delay).round()),
        vsync: this);
    animation2 = Tween<double>(begin: -40, end: 0).animate(controller)
      ..addListener(() {
        setState(() {});
      });

    animation = Tween<double>(begin: 0, end: 1).animate(controller)
      ..addListener(() {
        setState(() {
          // The state that has changed here is the animation object’s value.
        });
      });
  }

  @override
  Widget build(BuildContext context) {
    controller.forward();
    return Transform.translate(
      offset: Offset(0, animation2.value),
      child: Opacity(
        opacity: animation.value,
        child: widget.child,
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

您可以使用任何容器或任何小部件。当页面构建或打开时此动画起作用

                    FadeInAnimation(
 delay: 2, child: child: Center(
                          child: Container(width: 100,
                          height: 100,
                          color: Colors.amber,),
                        )
)