Shaky_animated_list

pub

Shaky_animated_list 可用于 **三个** 主要用途

  1. 动画列表视图滚动。
  2. 动画网格视图首次显示。
  3. 动画网格视图滚动。

1. 库概述

所有这些动画都会跟踪您屏幕上的滚动变化，或者列表首次附加时，以不同的过渡规则动画化您的列表项。

抖动网格 滚动列表 滚动网格
shaking_grid scroll_list scroll_grid

您可以通过更改列表的 **滚动方向** 来定义这些动画方向 **轴** 。

抖动网格

只需将您的网格子项包裹在 GridAnimatorWidget 中，即可轻松实现抖动网格，然后我们就开始处理了 ^^

例如，您可以这样做来显示抖动的灰色卡片

    GridView.count(
    crossAxisCount: 3,
    // shrinkWrap: true,
    children: List.generate(9, (i) => GridAnimatorWidget(
        child: Padding(
        padding: const EdgeInsets.all(4),
            child: ClipRRect(
            borderRadius: const BorderRadius.all(Radius.circular(10)),
                child: Container(
                color: Colors.grey,
                ),
        ),
    ),
    ),).toList()
    )

shaking_grid

ListView 滚动动画

ListView 滚动动画将使您能够完全控制动画空间和持续时间来实施滚动动画，请不要为您的元素添加垂直边距，您可以使用 spaceBetween 来在元素之间创建间距，并使用 extendedSpaceBetween 来控制滚动动画空间。
您还可以使用 duration 根据您的需求来控制反向动画的持续时间。

例如，您可以这样做来显示 ListView 垂直滚动动画

    AnimatedListView(
    duration: 100,
    extendedSpaceBetween: 30,
    spaceBetween:10,
    children: List.generate(
    21,
    (index) => Card(
    elevation: 50,
    margin: const EdgeInsets.symmetric(horizontal: 20),
    shadowColor: Colors.black,
    color: Colors.grey,
        child: SizedBox(
        height: 300,
            child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
                children: [
                    CircleAvatar(
                    backgroundColor: Colors.blue[500],
                    radius: 60,
                    child: const CircleAvatar(
                        backgroundImage: NetworkImage(
                        "https://avatars.githubusercontent.com/u/30810111?v=4"),
                        //NetworkImage
                        radius: 50,
                        ),
                    ),
                    const SizedBox(
                    height: 10,
                    ),
                    Text(
                    'Scroll to start',
                        style: TextStyle(
                        fontSize: 30,
                        color: Colors.blue[900],
                        fontWeight: FontWeight.w500,
                        ),
                    ),
                    const SizedBox(
                    height: 10,
                    ),
                    const Text(
                    'Animated list demo',
                        style: TextStyle(
                        fontSize: 15,
                        color: Colors.white,
                        ),
                    ),
                    const SizedBox(
                    height: 10,
                    ),
                ],
            ),
            ),
        ),
    )
))

scroll_list

Grid 滚动动画

Grid 滚动动画将使您能够在网格视图中实现滚动动画，这里有一个小改动，就是我们将实现 delegate，这是一个我们遇到的设计问题，所以您需要
指定您的 crossAxisCount、crossAxisSpacing、mainAxisSpacing 和 duration，然后我们将从这里开始，您可以使用 GridView 中任何其他默认支持的参数。

例如，您可以这样做来显示 Grid 垂直滚动动画

    AnimatedGridView(
          duration: 100,
          crossAxisCount: 2,
          mainAxisExtent: 256,
          crossAxisSpacing: 8,
          mainAxisSpacing: 8,
          children: List.generate(
              21,
              (index) => Card(
                    elevation: 50,
                    shadowColor: Colors.black,
                    color: Colors.grey[700],
                    child: SizedBox(
                      width: double.infinity,
                      child: Padding(
                        padding: const EdgeInsets.all(20.0),
                        child: Column(
                          children: const [
                            CircleAvatar(
                              backgroundColor: Colors.black,
                              radius: 60,
                              child: CircleAvatar(
                                backgroundImage: NetworkImage(
                                    "https://avatars.githubusercontent.com/u/30810111?v=4"),
                                //NetworkImage
                                radius: 50,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  )
             )
       ),

scroll_grid

ListView 水平滚动动画

如果您想添加水平动画，您只需要为小部件添加一个滚动方向，就是这样
例如，您可以这样做来显示 ListView 水平滚动动画

  AnimatedListView(
        duration: 100,
        scrollDirection: Axis.horizontal,
        children: List.generate(
        21,
            (index) => const Card(
            elevation: 50,
            margin: EdgeInsets.symmetric(horizontal: 10),
            shadowColor: Colors.black,
            color: Colors.grey,
                child: SizedBox(
                height: 300,
                width: 200,
                ),
            ),
        ),
  ),

horz_list

示例源代码

所有情况的示例

贡献

让我们通过协作来开发。我们非常欢迎您通过提交 issue 和打开 PR 来贡献。在 PR 之前提交 issue 是必须的。

许可证

该项目是在 Apache 2.0 许可下发布的。您可以随意克隆和修改仓库，但请不要忘记引用作者？

GitHub

查看 Github