轻松地为您的 ListView 和 Row 子项添加交错动画

Flutter 交错动画

如 Material Design 指南所示，轻松地为您的 ListView、GridView、Column 和 Row 子项添加交错动画。

展示

ListView	GridView	Column

安装

依赖

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

dependencies:
  flutter_staggered_animations: "^0.1.2"

导入

在代码文件中导入该包。

import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

基本用法

以下是将交错动画应用于 `ListView` 项目的示例代码。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AnimationLimiter(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return AnimationConfiguration.staggeredList(
            position: index,
            duration: const Duration(milliseconds: 375),
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: YourListChild(),
              ),
            ),
          );
        },
      ),
    ),
  );
}

API概述

该包包含三种类型的类

• 动画
• AnimationConfiguration
• AnimationLimiter

动画

动画分为4类

• FadeInAnimation
• SlideAnimation
• ScaleAnimation
• FlipAnimation

通过包装动画，可以将它们组合起来以产生高级动画效果。

SlideAnimation与FadeInAnimation结合的示例

child: SlideAnimation(
  verticalOffset: 50.0,
    child: FadeInAnimation(
      child: YourListChild(),
    ),
)

动画必须是 `AnimationConfiguration` 的直接子级。

AnimationConfiguration

`AnimationConfiguration` 是一个 `InheritedWidget`，它与其子级共享其动画设置（主要是持续时间和延迟）。

命名构造函数

根据您将展示动画的场景，应使用 `AnimationConfiguration` 的命名构造函数之一。

• 如果希望同时启动所有子动画，请使用 `AnimationConfiguration.synchronized`。
• 如果您希望延迟每个子动画以产生单轴交错动画（从上到下或从左到右），请使用 `AnimationConfiguration.staggeredList`。
• 如果您希望延迟每个子动画以产生双轴交错动画（从左到右和从上到下），请使用 `AnimationConfiguration.staggeredGrid`。

如果您不在 `ListView` 或 `GridView` 的上下文中，可以使用一个实用的静态方法来帮助您将交错动画应用于 `Row` 或 `Column` 的子级。

• AnimationConfiguration.toStaggeredList

如果需要，您可以在每个子动画中覆盖 `duration` 和 `delay`。

AnimationLimiter

在可滚动视图的上下文中，您的子动画仅在用户滚动并出现在屏幕上时才构建。
这就导致您的动画会在您滚动内容时运行。如果这不是您希望在应用程序中实现的行为，可以使用 `AnimationLimiter`。

`AnimationLimiter` 是一个 `InheritedWidget`，它会阻止子小部件在 `AnimationLimiter` 构建的第一个帧中被动画化。

为了有效，`AnimationLimiter` 必须是您的可滚动小部件列表的直接父级。

如果您的视图不可滚动，可以省略 `AnimationLimiter`。

快速示例

ListView

以下是将交错动画应用于 `ListView` 子级的示例代码。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AnimationLimiter(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return AnimationConfiguration.staggeredList(
            position: index,
            duration: const Duration(milliseconds: 375),
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: YourListChild(),
              ),
            ),
          );
        },
      ),
    ),
  );
}

GridView

以下是将交错动画应用于 `GridView` 子级的示例代码。

@override
Widget build(BuildContext context) {
  int columnCount = 3;

  return Scaffold(
    body: AnimationLimiter(
      child: GridView.count(
        crossAxisCount: columnCount,
        children: List.generate(
          100,
          (int index) {
            return AnimationConfiguration.staggeredGrid(
              position: index,
              duration: const Duration(milliseconds: 375),
              columnCount: columnCount,
              child: ScaleAnimation(
                child: FadeInAnimation(
                  child: YourListChild(),
                ),
              ),
            );
          },
        ),
      ),
    ),
  );
}

Column

以下是将交错动画应用于 `Column` 子级的示例代码。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: AnimationLimiter(
          child: Column(
            children: AnimationConfiguration.toStaggeredList(
              duration: const Duration(milliseconds: 375),
              childAnimationBuilder: (widget) => SlideAnimation(
                horizontalOffset: 50.0,
                child: FadeInAnimation(
                  child: widget,
                ),
              ),
              children: YourColumnChildren(),
            ),
          ),
        ),
      ),
    );
  }

GitHub

https://github.com/mobiten/flutter_staggered_animations