如何在Flutter中实现GridView滚动时的动画效果

核心实现思路是监听滚动位置，给首次进入可视区域的子元素绑定渐变、位移或缩放动画，纯原生Flutter即可实现，无需引入额外依赖。

实现步骤 #

1. 初始化滚动控制器和动画集合

• 给GridView绑定ScrollController用于实时获取滚动偏移量
• 提前为每个列表项初始化对应的AnimationController和动画插值对象，避免滚动过程中频繁创建对象产生性能问题

2. 计算列表项可见性，触发动画

• 在itemBuilder中计算当前子项在列表中的绝对位置，判断是否已经进入可视区域
• 子项首次进入可视区域时，调用对应AnimationController的forward()方法启动动画

3. 给子项包裹动画组件
   可以根据需求选择不同的动画组件组合，常用的搭配如下：

• 渐入效果：使用FadeTransition控制子项透明度从0过渡到1
• 上移入场效果：使用SlideTransition控制子项偏移从Offset(0, 0.2)过渡到Offset.zero
• 缩放入场效果：使用ScaleTransition控制子项缩放比例从0.8过渡到1

核心代码示例 #

import 'package:flutter/material.dart';

class AnimatedGridView extends StatefulWidget {
  const AnimatedGridView({super.key});

  @override
  State<AnimatedGridView> createState() => _AnimatedGridViewState();
}

class _AnimatedGridViewState extends State<AnimatedGridView> with SingleTickerProviderStateMixin {
  final ScrollController _scrollController = ScrollController();
  final List<AnimationController> _animationControllers = [];
  final List<Animation<double>> _opacityAnimations = [];
  final List<Animation<Offset>> _slideAnimations = [];
  final List<bool> _hasAnimated = [];
  final int _itemCount = 50;
  final double _itemExtent = 200; // 单个子项的高度

  @override
  void initState() {
    super.initState();
    // 初始化所有动画控制器
    for (int i = 0; i < _itemCount; i++) {
      _hasAnimated.add(false);
      final controller = AnimationController(
        vsync: this,
        duration: const Duration(milliseconds: 250),
      );
      _animationControllers.add(controller);
      _opacityAnimations.add(Tween<double>(begin: 0, end: 1).animate(
        CurvedAnimation(parent: controller, curve: Curves.easeOut),
      ));
      _slideAnimations.add(Tween<Offset>(begin: const Offset(0, 0.3), end: Offset.zero).animate(
        CurvedAnimation(parent: controller, curve: Curves.easeOut),
      ));
    }
    // 监听滚动事件
    _scrollController.addListener(_onScroll);
  }

  void _onScroll() {
    final scrollOffset = _scrollController.offset;
    final viewportHeight = MediaQuery.of(context).size.height;
    // 遍历所有子项，判断是否进入可视区域
    for (int i = 0; i < _itemCount; i++) {
      final itemTop = i ~/ 2 * _itemExtent; // 2为交叉轴数量，根据你的crossAxisCount调整
      if (!_hasAnimated[i] && itemTop > scrollOffset - 100 && itemTop < scrollOffset + viewportHeight) {
        _animationControllers[i].forward();
        _hasAnimated[i] = true;
      }
    }
  }

  @override
  void dispose() {
    for (var controller in _animationControllers) {
      controller.dispose();
    }
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      controller: _scrollController,
      padding: const EdgeInsets.all(16),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 16,
        mainAxisSpacing: 16,
        childAspectRatio: 0.8,
      ),
      itemCount: _itemCount,
      itemBuilder: (context, index) {
        return FadeTransition(
          opacity: _opacityAnimations[index],
          child: SlideTransition(
            position: _slideAnimations[index],
            child: Container(
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.circular(12),
              ),
            ),
          ),
        );
      },
    );
  }
}

优化建议 #

• 如果列表数量极大，可以改用懒加载方式创建动画控制器，仅为即将进入可视区域的子项创建动画资源，进一步降低内存占用
• 调整动画时长和曲线参数即可匹配你要的动效节奏，滚动速度快时可以适当缩短动画时长避免动效还没执行完子项就滚出可视区域
• 不需要重复触发动画的场景保留_hasAnimated标记即可，需要滚动时每次都触发动画的场景移除该标记，每次子项进入可视区域都调用forward()方法即可

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