Flutter动画组件插件animated_flutter_widgets的使用

Flutter动画组件插件animated_flutter_widgets的使用

简介

通过使用animated_flutter_widgets插件，您可以轻松地为Flutter应用程序添加令人惊叹的动画效果。该插件不仅提供了多种预设计的动画组件，还允许您自定义动画，从而加速开发过程并提升用户体验。

支持的平台

• Android
• iOS
• Web
• MacOS
• Windows
• Linux

功能

• 稳定动画：提供流畅的动画效果。

• 连续动画：支持无限循环的动画效果。

• 页面过渡动画：为页面切换添加平滑的过渡效果。

• 按钮点击动画：为按钮点击添加动态反馈。

• 动画列表视图：为列表项添加进入和离开时的动画效果。

• 动画网格视图：为网格项添加进入和离开时的动画效果。

• 动画AppBar：为AppBar添加动态效果。

使用方法

1. 添加依赖

在pubspec.yaml文件中添加animated_flutter_widgets依赖：

dependencies:
  animated_flutter_widgets: ^最新版本号

2. 导入包

在Dart文件中导入animated_flutter_widgets包：

import 'package:animated_flutter_widgets/animated_widgets.dart';

3. 使用动画组件

以下是一些常见的动画组件及其用法：

3.1 滑动进入动画 (SlideInAnimation)

将您的小部件包裹在SlideInAnimation中，以实现从指定方向滑动进入的效果：

SlideInAnimation(
  direction: Direction.right, // 指定滑动方向
  duration: const Duration(seconds: 1), // 动画持续时间
  child: YourWidget(), // 要动画的小部件
);

3.2 3D立方体动画 (Cube3DAnimation)

创建一个3D立方体动画，支持连续播放：

Cube3DAnimation(
  sideLength: 100, // 立方体边长
  duration: const Duration(seconds: 4), // 动画持续时间
  isContinuous: true, // 是否连续播放
  child: YourWidget(), // 要动画的小部件
);

3.3 长按动画 (LongTapAnimation)

为小部件添加长按动画效果：

LongTapAnimation(
  // pressDuration: Duration(seconds: 0), // 可选：设置长按持续时间
  child: YourWidget(), // 要动画的小部件
);

3.4 动画列表视图 (AnimatedListViewBuilder)

为列表项添加动画效果：

AnimatedListViewBuilder(
  itemCount: 25, // 列表项数量
  customColor: ColorUtility.magenta, // 自定义颜色（如果使用CollectionAnimationType.listColored）
  animationType: CollectionAnimationType.leftScale, // 动画类型
  itemBuilder: (context, index) {
    return YourWidget(); // 列表项小部件
  },
);

3.5 动画网格视图 (AnimatedGridViewBuilder)

为网格项添加动画效果：

AnimatedGridViewBuilder(
  itemCount: 25, // 网格项数量
  animationType: CollectionAnimationType.scaleOut, // 动画类型
  itemBuilder: (context, index) {
    return YourWidget(); // 网格项小部件
  },
);

3.6 动画AppBar (SlideInAnimatedAppBar)

为AppBar添加滑动进入动画：

SlideInAnimatedAppBar(
  backgroundColor: ColorUtility.magenta, // AppBar背景颜色
  animationDuration: 1000, // 动画持续时间（毫秒）
  title: const Text('Second Page'), // AppBar标题
);

3.7 页面过渡动画 (PopAndScaleTransition)

为页面切换添加过渡动画：

Navigator.push(
  context,
  PopAndScaleTransition(page: YourPage()), // 指定要跳转的页面
);

完整示例Demo

以下是一个完整的示例应用，展示了如何使用animated_flutter_widgets插件中的各种动画效果：

import 'package:animated_flutter_widgets/animated_widgets.dart';
import 'package:flutter/material.dart';

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

/// 主应用程序小部件
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Animations(),
    );
  }
}

/// 显示动画的小部件
class Animations extends StatelessWidget {
  const Animations({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple, // 设置AppBar背景颜色
        title: const Text("Animation Widget Example"), // 设置AppBar标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 滑动进入动画 - 页面过渡按钮
            SlideInAnimation(
              direction: Direction.down, // 从下往上滑动
              duration: const Duration(seconds: 1), // 动画持续时间为1秒
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.purple, // 按钮背景颜色
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    ScaleSlideTransition(
                      page: const PageTransitionAnimationWidget(), // 跳转到页面过渡动画页面
                      isLeftScaled: false, // 是否从左侧缩放
                    ),
                  );
                },
                child: const Text(
                  'Page Transition Animations', // 按钮文本
                  style: TextStyle(color: Colors.white), // 文本颜色
                ),
              ),
            ),

            const SizedBox(height: 20), // 添加间距

            // 滑动进入动画 - 动画目录按钮
            SlideInAnimation(
              direction: Direction.up, // 从上往下滑动
              duration: const Duration(seconds: 1), // 动画持续时间为1秒
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.purple, // 按钮背景颜色
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    PopAndScaleTransition(page: const AnimationCatlog()), // 跳转到动画目录页面
                  );
                },
                child: const Text(
                  'Animations', // 按钮文本
                  style: TextStyle(color: Colors.white), // 文本颜色
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// 页面过渡动画页面
class PageTransitionAnimationWidget extends StatelessWidget {
  const PageTransitionAnimationWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page Transition Animation'),
      ),
      body: Center(
        child: Text(
          'This is a page transition animation example!',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
    );
  }
}

/// 动画目录页面
class AnimationCatlog extends StatelessWidget {
  const AnimationCatlog({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animations Catalog'),
      ),
      body: Center(
        child: Text(
          'Explore various animations here!',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
    );
  }
}