如何在Flutter中实现从边角滑入中心的轮播切换动画？

核心思路 #

要实现滑动时轮播项从屏幕左上角/右上角平滑过渡到中心的效果，核心是通过自定义页面变换逻辑，结合PageController的偏移量来控制每个页面的位置、缩放和透明度变化，替代默认的横向滑动过渡。

具体实现步骤 #

1. 自定义页面变换器 #

通过自定义页面变换逻辑，根据页面的相对偏移量（position）计算动画参数：

class CornerSlideTransformer {
  final double scaleFactor = 0.8;
  final double opacityFactor = 0.5;

  Widget transform(Widget page, BuildContext context, double position) {
    double opacity = 1.0;
    Matrix4 transformMatrix = Matrix4.identity();
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;

    if (position < -1) {
      // 完全滑出左侧的页面
      opacity = 0.0;
    } else if (position <= 0) {
      // 左侧进入的页面：从右上角滑入中心
      opacity = 1 + position * opacityFactor;
      transformMatrix = Matrix4.translationValues(
        screenWidth * position * 0.5,
        position * screenHeight * 0.5,
        0,
      )..scale(1 + position * (1 - scaleFactor));
    } else if (position <= 1) {
      // 右侧进入的页面：从左上角滑入中心
      opacity = 1 - position * opacityFactor;
      transformMatrix = Matrix4.translationValues(
        -screenWidth * position * 0.5,
        position * screenHeight * 0.5,
        0,
      )..scale(1 - position * (1 - scaleFactor));
    } else {
      // 完全滑出右侧的页面
      opacity = 0.0;
    }

    return Opacity(
      opacity: opacity.clamp(0.0, 1.0),
      child: Transform(
        transform: transformMatrix,
        alignment: Alignment.center,
        child: page,
      ),
    );
  }
}

2. 封装轮播组件 #

将变换器与PageView结合，封装成可复用的轮播组件：

class CornerSlideCarousel extends StatefulWidget {
  final List<Widget> items;
  final double viewportFraction;

  const CornerSlideCarousel({
    super.key,
    required this.items,
    this.viewportFraction = 0.85,
  });

  @override
  State<CornerSlideCarousel> createState() => _CornerSlideCarouselState();
}

class _CornerSlideCarouselState extends State<CornerSlideCarousel> {
  final PageController _pageController = PageController();

  @override
  void initState() {
    _pageController.viewportFraction = widget.viewportFraction;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final transformer = CornerSlideTransformer();
    return PageView.builder(
      controller: _pageController,
      itemCount: widget.items.length,
      itemBuilder: (context, index) {
        return AnimatedBuilder(
          animation: _pageController,
          builder: (context, child) {
            final position = (_pageController.page ?? index) - index;
            return transformer.transform(child!, context, position);
          },
          child: widget.items[index],
        );
      },
    );
  }

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

3. 使用示例 #

创建测试用的轮播项并集成到页面：

class CarouselDemoPage extends StatelessWidget {
  final List<Color> _itemColors = [
    Colors.deepOrange,
    Colors.teal,
    Colors.purple,
    Colors.amber
  ];

  CarouselDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("角落滑入轮播")),
      body: Center(
        child: SizedBox(
          height: 320,
          child: CornerSlideCarousel(
            items: _itemColors.map((color) {
              return Container(
                margin: const EdgeInsets.symmetric(horizontal: 8),
                decoration: BoxDecoration(
                  color: color,
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Center(
                  child: Text(
                    "轮播项 ${_itemColors.indexOf(color) + 1}",
                    style: const TextStyle(fontSize: 24, color: Colors.white),
                  ),
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

关键细节说明 #

• 偏移逻辑：根据页面的position值区分左右侧页面，分别设置右上角/左上角的平移路径，用屏幕尺寸计算偏移比例，保证适配不同设备。
• 叠加动画：平移的同时添加缩放和透明度变化，让页面从缩小、半透明状态过渡到正常大小和完全显示，增强动画的层次感和平滑度。
• 性能优化：使用AnimatedBuilder监听PageController的动画变化，避免不必要的组件重建。

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