animated_item

一个 Flutter 插件，可在滚动时为 ListView 和 PageView 项目设置动画。

预览

ListView 的动画项目

PageView 的动画页面

安装

将 animated_item 添加为 pubspec.yaml 文件中的依赖项。

animated_item: ^<latest-version>

用法

AnimatedItem 使用 ScrollController 的滚动偏移来为 [ListView] 中的子项设置动画。

ListView.builder(
  itemCount: colors.length,
  scrollDirection: Axis.horizontal,
  controller: _scaleController,
  itemBuilder: (context, index) {
    return AnimatedItem(
      controller: _scaleController,
      index: index,
      effect: const ScaleEffect(),
      child: Container(
        margin: const EdgeInsets.all(5.0),
        width: width,
        decoration: BoxDecoration(
          color: colors[index],
          borderRadius: _borderRadius),
      )
    );
  },
)

AnimatedPage 使用 PageController 的滚动偏移来为 [PageView] 中的子项设置动画。

PageView.builder(
  controller: _scaleController,
  itemCount: colors.length,
  itemBuilder: (context, index) {
    return AnimatedPage(
      controller: _scaleController,
      index: index,
      effect: const ScaleEffect(),
      child: Container(
        margin: const EdgeInsets.all(5.0),
        width: width,
        decoration: BoxDecoration(
          color: colors[index], 
          borderRadius: _borderRadius),
      )
    );
  },
)

自定义

以下是可用于自定义效果的属性列表

名称 类型 描述
类型 AnimationType 确定效果的开始和结束。
snap 布尔值 如果激活，则在不滚动时恢复到原始位置。
animationAxis Axis [TranslateEffect] 的动画轴。
startOffset 整数 [TranslateEffect] 的动画开始偏移。使用负数进行反向平移。
alignment AlignmentGeometry 原点的对齐方式，相对于子项的大小。
verticalScale 双精度 垂直缩放效果。
horizontalScale 双精度 水平缩放效果。
rotationAngle 双精度 [RotateEffect] 的旋转角度。
opacity 双精度 Opacity 决定了项目的淡化程度。更高的数字会导致更多的淡化。

贡献

任何形式的贡献都非常受欢迎！随时 fork 并以您想要的方式改进 animated_item，提交拉取请求或打开一个 issue。

支持此库

您可以通过在pub上点赞、在Github上标星以及报告遇到的任何bug来支持此库。

GitHub

查看 Github