Flutter实现动画列表AnimateListView

╰半橙微兮° 2024-03-24 20:45 85阅读 0赞

由于业务需要，在打开列表时，列表项需要一个从右边飞入的动画效果，故封装一个专门可以执行动画的列表组件，可以自定义自己的动画，内置有水平滑动，缩放等简单动画。花里胡哨的动画效果由你自己来定制吧。

**功能：**

1.可自定义动画。

2.内置水平滑动和缩放动画。

**演示：**

![a0b0d915e761445292ad7ccde5fc911e.png][]![c75856c3961f494c9ea8a7ae0550f123.png][]

**代码：**

import 'dart:math';
    
    import 'package:flutter/cupertino.dart';
    import 'package:get/get.dart';
    
    ///可设置动画的列表。
    ///内部使用的是[SingleChildScrollView]实现，
    ///需要外层设置定义可约束高度。
    class KqAnimateListView<T> extends StatefulWidget {
      ///数据
      final List<T> data;
    
      ///列表
      final Widget Function(T t) item;
    
      ///动画自定义
      final IAnimate? animate;
    
      ///是否需要每次刷新时都执行动画
      final bool isNeedFlashEveryTime;
    
      const KqAnimateListView({
        super.key,
        required this.item,
        required this.data,
        this.animate,
        this.isNeedFlashEveryTime = false,
      });
    
      @override
      State<StatefulWidget> createState() => _KqAnimateListViewState<T>();
    }
    
    class _KqAnimateListViewState<T> extends State<KqAnimateListView<T>>
        with TickerProviderStateMixin {
      late IAnimate animate;
      late AnimationController controller;
      late Animation animation;
    
      @override
      void initState() {
        super.initState();
        animate = widget.animate ?? ScaleAnimate();
        animate.init(widget.data.length);
        controller = animate.getAnimationController(this);
        animation = animate.getAnimation(controller, this);
        //启动动画(正向执行)
        controller.forward();
      }
    
      @override
      void didUpdateWidget(covariant KqAnimateListView<T> oldWidget) {
        super.didUpdateWidget(oldWidget);
        if (widget.isNeedFlashEveryTime) {
          animate = widget.animate ?? ScaleAnimate();
          animate.init(widget.data.length);
          controller = animate.getAnimationController(this);
          animation = animate.getAnimation(controller, this);
          //启动动画(正向执行)
          controller.forward();
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return SizedBox.expand(
          child: SingleChildScrollView(
            child: Column(
              children: _getChildren(context),
            ),
          ),
        );
      }
    
      List<Widget> _getChildren(BuildContext context) {
        List<Widget> list = [];
        for (int i = 0; i < widget.data.length; i++) {
          Widget child = widget.item.call(widget.data[i]);
          list.add(
            animate.animate(context, i, child, animation, controller),
          );
        }
        return list;
      }
    
      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }
    }
    
    ///动画抽象类。
    ///实现该类，定制自己的列表动画。
    abstract class IAnimate {
      ///初始化
      ///[length] 列表长度
      void init(int length);
    
      ///获取AnimationController
      AnimationController getAnimationController(TickerProvider provider);
    
      ///获取Animation
      Animation getAnimation(
          AnimationController controller, State<StatefulWidget> state);
    
      ///定制自己的动画，每一个item都会调用到animate，
      ///当需要差异动画时需要根据[index]计算不同item的动画时机
      ///[widget] 执行动画之后的widget
      ///[index] 列表的item的index
      Widget animate(
        BuildContext context,
        int index,
        Widget widget,
        Animation animation,
        AnimationController controller,
      );
    }
    
    ///水平移动动画
    class HorizontalAnimate extends IAnimate {
      ///动画执行时长比例
      static double rate = 0.4;
    
      ///单个动画执行长度
      static double baseGap = 1000.0;
    
      ///两个个动画执行间隔长度
      static double twoGap = 200.0;
    
      ///动画执行的总长度，根据列表长度动态计算值
      late double gap;
    
      ///动画是从左边还是右边开始执行
      HorizontalAnimateDirection direction;
    
      HorizontalAnimate({this.direction = HorizontalAnimateDirection.right});
    
      @override
      void init(int length) {
        gap = length * twoGap + baseGap;
      }
    
      @override
      Widget animate(BuildContext context, int index, Widget widget,
          Animation animation, AnimationController controller) {
        double width = context.width;
    
        ///范围0->1
        double mix = (animation.value - twoGap * index) / baseGap;
        if (mix > 1) {
          mix = 1;
        }
        double left = width * (1 - mix);
        return Container(
          transform: Matrix4.translationValues(
              direction == HorizontalAnimateDirection.left ? -left : left, 0, 0),
          child: widget,
        );
      }
    
      @override
      AnimationController getAnimationController(TickerProvider provider) {
        return AnimationController(
            duration: Duration(milliseconds: (gap * rate).toInt()),
            vsync: provider);
      }
    
      @override
      Animation getAnimation(
          AnimationController controller, State<StatefulWidget> state) {
        return Tween(begin: 0.0, end: gap).animate(controller)
          ..addListener(() {
            if (state.mounted) {
              state.setState(() {});
            }
          });
      }
    }
    
    enum HorizontalAnimateDirection {
      ///左边
      left,
    
      ///右边
      right;
    }
    
    ///缩放动画
    class ScaleAnimate extends IAnimate {
      ///动画执行时长比例
      static double rate = 0.4;
    
      ///单个动画执行长度
      static double baseGap = 1000.0;
    
      ///两个个动画执行间隔长度
      static double twoGap = 200.0;
    
      ///动画执行的总长度，根据列表长度动态计算值
      late double gap;
    
      @override
      Widget animate(BuildContext context, int index, Widget widget,
          Animation animation, AnimationController controller) {
        double width = context.width;
    
        ///范围0.5->1
        double mix = ((animation.value - twoGap * index) / baseGap + 1) / 2;
        if (mix > 1) {
          mix = 1;
        }
        double widthMix = width * mix;
        return SizedBox(
          width: max(0, widthMix),
          child: widget,
        );
      }
    
      @override
      AnimationController getAnimationController(TickerProvider provider) {
        return AnimationController(
            duration: Duration(milliseconds: (gap * rate).toInt()),
            vsync: provider);
      }
    
      @override
      Animation getAnimation(
          AnimationController controller, State<StatefulWidget> state) {
        return Tween(begin: 0.0, end: gap).animate(controller)
          ..addListener(() {
            if (state.mounted) {
              state.setState(() {});
            }
          });
      }
    
      @override
      void init(int length) {
        gap = length * twoGap + baseGap;
      }
    }

**使用：**

KqAnimateListView(
                        data: const [
                          "Test1",
                          "Test2",
                          "Test3",
                          "Test3",
                          "Test3",
                          "Test3",
                          "Test3",
                          "Test3",
                          "Test3",
                          "Test3",
                          "Test3",
                          "Test3",
                          "Test3"
                        ],
                        item: (t) {
                          return Container(
                            width: double.infinity,
                            height: 50,
                            color: Colors.redAccent,
                            margin: EdgeInsets.only(top: 10.r),
                            child: Text(t),
                          );
                        },
                        animate: type == 0
                            ? HorizontalAnimate(
                                direction: HorizontalAnimateDirection.left)
                            : type == 1
                                ? HorizontalAnimate(
                                    direction: HorizontalAnimateDirection.right)
                                : ScaleAnimate(),
                        isNeedFlashEveryTime: true,
                      )

[a0b0d915e761445292ad7ccde5fc911e.png]: https://img-blog.csdnimg.cn/a0b0d915e761445292ad7ccde5fc911e.png
[c75856c3961f494c9ea8a7ae0550f123.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1e5c57bbdeb04d7c8faf67938ad8b5ea.png