Flutter自定义动画插件basic_custom_animations的使用

Flutter自定义动画插件basic_custom_animations的使用

该Flutter插件提供了一组20个预置的自定义动画，可用于商业应用。该插件包括多种动画效果，如缩放、滑动、淡入淡出、旋转等。这些动画易于集成和定制，非常适合提升你的Flutter应用的用户界面。

功能

• 20个预置动画 包括：

  • FadeTransitionWidget：淡入淡出动画。
  • ScaleAndTranslate：结合了缩放和平移的效果。
  • SlideInFromTop：从顶部滑入动画。
  • SlideInFromBottom：从底部滑入动画。
  • ZoomEffect：平滑地放大组件。
  • BounceEffect：弹跳动画。
  • SlidePageTransition：页面滑动过渡动画。
  • ElasticEffect：带有弹性感觉的拉伸动画。
  • AnimatedSnackbar：带滑动和淡入淡出效果的自定义snackbar。
  • RotationEffect：旋转动画。
  • FlipTransition：翻转动画。
  • ExpandAndCollapse：展开或折叠动画。
  • DiagonalBounce：对角线弹跳动画。
  • 更多…

• 易用的基于Widget的API。

• 可自定义的持续时间和动画曲线。

• 优化用于交互式UI/UX设计。

安装

要安装此插件，请按以下步骤操作：

1. 在你的pubspec.yaml文件中添加以下内容：

dependencies:
  flutter:
    sdk: flutter
  basic_custom_animations: ^1.0.0

然后在你的项目中导入该包：

import 'package:flutter/material.dart';
import 'package:basic_custom_animations/basic_custom_animations.dart'; // 导入包

1. 使用以下代码来创建一个简单的Flutter应用，并演示如何使用这些动画：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter Animation Examples")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // ZoomEffect
              ZoomEffect(
                duration: Duration(seconds: 1),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ),
              SizedBox(height: 20),
              // SlideInFromTop
              SlideInFromTop(
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
              ),
              SizedBox(height: 20),
              // FadeTransitionWidget
              FadeTransitionWidget(
                duration: Duration(seconds: 2),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              ),
              SizedBox(height: 20),
              // BounceEffect
              BounceEffect(
                duration: Duration(seconds: 1),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.purple,
                ),
              ),
              SizedBox(height: 20),
              // SlidePageTransition
              SlidePageTransition(
                duration: Duration(seconds: 1),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.orange,
                ),
              ),
              SizedBox(height: 20),
              // ElasticEffect
              ElasticEffect(
                duration: Duration(seconds: 1),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.yellow,
                ),
              ),
              SizedBox(height: 20),
              // AnimatedSnackbar 示例
              ElevatedButton(
                onPressed: () {
                  final snackBar = AnimatedSnackbar(
                    message: 'This is an animated snackbar!',
                  );
                  ScaffoldMessenger.of(context).showSnackBar(snackBar);
                },
                child: Text('Show Snackbar'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}