Flutter中的动画小部件

动画被认为是艰苦的工作，需要时间来学习。 Flutter的软件包让这一切变得简单。为了不费力地为小部件设置动画，我们可以将它们包装在 animate_do 包中不同定义的动画小部件中。在本文中，我们将了解如何使用 animate_do 包轻松地为小部件设置动画并增强用户体验。

添加依赖

在pubspec.yaml文件中，在 dependencies 部分下添加 animate_do 依赖项。运行 pub get 以安装此依赖项或在 Windows 中按 Ctrl + S 即可。

导入依赖

在主要。 dart，通过以下方式导入依赖项：

import 'package:animate_do/animate_do.dart';

执行

在 animate_do 包中，我们可以使用不同的动画小部件。他们之中有一些是 -

• 淡入动画
• 淡出动画
• 弹跳动画
• 弹性动画
• 幻灯片动画
• 翻转动画

所有这些动画小部件的属性都是相同的。属性是——

Dart

dynamic key,
required Widget child,
Duration duration = const Duration(milliseconds: 800),
Duration delay = const Duration(milliseconds: 0),
dynamic Function(AnimationController)? controller,
bool manualTrigger = false,
bool animate = true,
double from = 100,

在移动到动画小部件之前，让我们创建一个通用小部件，我们将把它作为孩子传递给每个动画小部件。在这里，我们正在创建一个返回绿色容器的 StatelessWidget NewContainer。

Dart

class NewContainer extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container(height: 60, width: 60, color: Colors.green);
  }
}

现在让我们深入研究不同动画的示例。

弹跳动画

BounceIn 动画小部件涉及子小部件的弹跳。弹跳小部件可以向下、向上、向左或向右反弹。要向下反弹小部件，请使用 BounceInDown，向上使用 BounceInUp。其他方向也一样。

Dart

BounceInUp(child: NewContainer(), duration: Duration(seconds: 4)),
BounceInDown(child: NewContainer(), duration: Duration(seconds: 4)),
BounceInUp(child: NewContainer(), duration: Duration(seconds: 4)),
BounceInDown(child: NewContainer(), duration: Duration(seconds: 4))

输出：

褪色动画

FadeIn 动画小部件还涉及在四个方向上淡入动画小部件 - 上、下、左、右。在下面的示例中，我们正在创建简单的淡入淡出动画，它们在四个不同的方向上淡入淡出。

Dart

FadeInLeft(duration: Duration(seconds: 4), child: NewContainer()),
FadeInUp(duration: Duration(seconds: 4), child: NewContainer()),
FadeInDown(duration: Duration(seconds: 4), child: NewContainer()),
FadeInRight(duration: Duration(seconds: 4), child: NewContainer()),

输出：

滑动动画

滑动动画也可以在四个方向上完成——上、右、下或左。在下面的示例中，我们仅创建左滑动动画。我们正在延迟每个动画小部件的动画，使其按顺序出现在屏幕上。要获得更好的可视化效果，请参阅输出。

Dart

SlideInLeft(
                delay: Duration(seconds: 5),
                duration: Duration(seconds: 4),
                child: NewContainer()),
 SlideInLeft(
                delay: Duration(seconds: 4),
                duration: Duration(seconds: 4),
                child: NewContainer()),
SlideInLeft(
                delay: Duration(seconds: 3),
                duration: Duration(seconds: 4),
                child: NewContainer()),
SlideInLeft(duration: Duration(seconds: 4), 
            child: NewContainer())

输出：

注意寻求者动画

还有一些可用的动画小部件，如摇摆、旋转、跳舞小部件等。如果我们希望动画永远存在，我们将动画小部件的无限属性设置为 true。

Dart

Swing(child: NewContainer(),infinite: true),
Bounce(child: NewContainer(), infinite: true),
Dance(child: NewContainer(), infinite: true),
Roulette(child: NewContainer(), infinite: true),
Spin(child: NewContainer(), infinite: true)

输出：

完整的示例代码

Dart

import 'package:flutter/material.dart';
import 'package:animate_do/animate_do.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Widgets',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  State createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksForGeeks"),
        centerTitle: true
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            FadeOutLeft(duration: Duration(seconds: 4), child: NewContainer()),
            BounceInUp(child: NewContainer(), duration: Duration(seconds: 4)),
            Swing(
              child: NewContainer(),
              infinite: true,
            ),
            Bounce(child: NewContainer(), infinite: true),
            Dance(child: NewContainer(), infinite: true),
            Roulette(child: NewContainer(), infinite: true),
            Spin(child: NewContainer(), infinite: true),
            SlideInLeft(duration: Duration(seconds: 4), child: NewContainer())
          ],
        ),
      ),
    );
  }
}
  
class NewContainer extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container(height: 60, width: 60, color: Colors.green);
  }
}

输出：