Flutter页面切换动画实现及自定义动画学习咨询

一、实现点击容器左滑移出+新页面右滑入效果（基于GetX） #

结合你熟悉的GetX动画体系，我们可以通过动画控制器管理容器的左滑逻辑，配合GetX页面过渡完成需求：

1. 创建动画控制器

写一个GetX控制器专门管理按钮的平移动画：

class ButtonSlideController extends GetxController with SingleGetTickerProviderMixin {
  late AnimationController animController;
  late Animation<double> slideAnim;

  @override
  void onInit() {
    super.onInit();
    animController = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    // 定义从屏幕内到完全左移出去的动画路径
    slideAnim = Tween<double>(begin: 0, end: -Get.width).animate(
      CurvedAnimation(parent: animController, curve: Curves.easeInOut),
    );
  }

  // 触发动画，结束后执行跳转逻辑
  void startAnimation(VoidCallback onFinish) {
    animController.forward().whenComplete(() {
      onFinish();
      animController.reset(); // 重置动画，支持重复点击
    });
  }

  @override
  void onClose() {
    animController.dispose();
    super.onClose();
  }
}

2. 修改BigButtons组件

将按钮改为响应式组件，绑定动画控制器实现点击滑出：

class BigButtons extends StatelessWidget {
  final String backgroundImage;
  final String text;
  final Widget targetPage; // 直接传入目标页面

  const BigButtons({
    super.key,
    required this.backgroundImage,
    required this.text,
    required this.targetPage,
  });

  @override
  Widget build(BuildContext context) {
    final animController = Get.put(ButtonSlideController());
    return Obx(() {
      return Transform.translate(
        offset: Offset(animController.slideAnim.value, 0),
        child: GestureDetector(
          onTap: () {
            animController.startAnimation(() {
              // 调用GetX右滑入页面过渡，和按钮动画时长对齐
              Get.to(
                targetPage,
                transition: Transition.rightToLeft,
                duration: const Duration(milliseconds: 300),
              );
            });
          },
          child: Container(
            height: Get.height * 0.25,
            width: Get.width * 0.8,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(backgroundImage),
                fit: BoxFit.cover,
              ),
              borderRadius: BorderRadius.circular(16),
            ),
            child: Center(
              child: Text(
                text,
                style: const TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
      );
    });
  }
}

3. 更新主页面按钮调用

替换原来的ontap回调为传入目标页面：

// 第一个按钮
BigButtons(
  backgroundImage: 'assets/form.jpg',
  text: 'BlaBla',
  targetPage: const ReqFormCreate(),
),
// 第二个按钮（替换为你的实际目标页面）
BigButtons(
  backgroundImage: 'assets/documents2.jpg',
  text: 'BlaBlaBla',
  targetPage: const YourSecondTargetPage(),
),

二、自定义动画学习渠道 #

1. Flutter官方核心文档：重点掌握AnimationController、Tween、CurvedAnimation的基础用法，以及AnimatedBuilder、AnimatedWidget的封装逻辑，这是自定义动画的底层基础。
2. GetX官方动画模块：专注学习GetX响应式动画的结合方式，理解Obx如何监听动画值变化更新UI，以及GetX页面过渡动画的自定义扩展。
3. 小Demo练手：从简单的平移、缩放、透明度动画入手，再尝试组合动画（比如平移+淡入），逐步积累实操经验。
4. 拆解内置动画源码：查看Flutter自带的SlideTransition、PageRouteBuilder实现，理解页面过渡的底层逻辑，再尝试修改参数实现自定义效果。

内容的提问来源于stack exchange，提问作者Stalutus