Flutter动画滚动项插件animated_scroll_item的使用

Flutter 动画滚动项插件 animated_scroll_item 的使用

Wrapper for the scrollable items (e.g. SingleChildScrollView, ListView). It allows you to highly customize behavior of visible items. Based on Flow widget

注意： 请注意，它尚未经过大型列表的测试。

Getting started

Installing

dependencies:
  animated_scroll_item: ^0.0.3

Import

import 'package:animated_scroll_item/animated_scroll_item.dart';

How to use

将您的项目小部件包装在 AnimatedScrollItem 中，并提供其配置：

AnimatedScrollItem(
  configs: [
    ItemAnimationConfig(
        // ...animation config
    ),
    ItemAnimationConfig(
        // ...another animation config
    ),
  ],
  size: const Size(double.infinity, 120), // The size is required
  // Provide your widget
  child: SizedBox(
    height: 120,
    child: Card(
      color: Colors.blue,
      child: Center(
        child: Text('$index'),
      ),
    ),
  ),
),

Configuration

AnimatedScrollItem

ItemAnimationConfig

ItemTransformAnimation

提供一个 animationValue 范围从 0 到 1 的回调，itemSize 也可以用于您的动画，matrix 是一个 Matrix4 对象，您需要在此对象上应用您的变换。

例如：

itemTransform: (
  double animationValue,
  Size size,
  Matrix4 matrix,
) {
  return matrix
    ..scale(animationValue)
    ..setTranslation(
        Vector3(size.width * (1 - animationValue) * .5, 0, 0));
},

ItemOpacityTransform

此回调允许您根据 animationValue 定义不透明度。

例如：

opacityTransform: (animationValue) => animationValue

AnimationRange

在这里，您可以定义可见列表的一部分，其中项目需要进行动画处理。它接受从 0 到 1 的值。 例如：

animationRange: const AnimationRange(min: 0, max: .1),

Contributing

欢迎创建 PR 或提出问题 :)

示例代码

import 'package:animated_scroll_item/animated_scroll_item.dart';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' hide Colors;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        itemCount: 30,
        itemBuilder: (context, index) => AnimatedScrollItem(
          configs: [
            ItemAnimationConfig(
              animationRange: const AnimationRange(min: 0, max: .1),
              itemTransform: (
                double animationValue,
                Size size,
                Matrix4 matrix,
              ) {
                return matrix
                  ..scale(animationValue)
                  ..setTranslation(
                      Vector3(size.width * (1 - animationValue) * .5, 0, 0));
              },
              opacityTransform: (animationValue) => animationValue,
            ),
            ItemAnimationConfig(
              animationRange: const AnimationRange(min: .9),
              itemTransform: (
                double animationValue,
                Size size,
                Matrix4 matrix,
              ) {
                return matrix
                  ..scale(1 - animationValue)
                  ..setTranslation(Vector3(size.width * animationValue, 0, 0));
              },
              opacityTransform: (animationValue) => 1 - animationValue,
            ),
          ],
          size: const Size(double.infinity, 120),
          child: SizedBox(
            height: 120,
            child: Card(
              color: Colors.blue,
              child: Center(
                child: Text('$index'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}