Flutter动画效果插件easy

Flutter 动画效果插件 easy_animate 的使用

easy_animate 是一个用于 Flutter 的简单而美丽的动画库，可以帮助开发者轻松地为应用添加各种动画效果。通过这个插件，你可以非常方便地为你的应用添加动画，而无需设置过多的属性。如果你需要自定义动画效果，也可以通过设置 Duration、Direction、moveAmount 等属性来实现。

1. 依赖

easy_animate 依赖于 simple_animations 包，因此在使用 easy_animate 时，simple_animations 也会被引入。

2. 动画列表

easy_animate 提供了多种常见的动画效果，包括：

FadeIn（淡入）
FadeOut（淡出）
SlideIn（滑入）
ScaleIn（缩放进入）
Shake（摇晃）
Bounce（弹跳）
Fluffy（轻盈浮动）
Pulse（脉冲）

2.1 FadeIn（淡入）

fade in animation

FadeInAnimation(
  animateDirection: AnimateDirection.left, // 设置动画方向为从左到右
  child: SomeWidget(), // 替换为你自己的组件
);

2.2 FadeOut（淡出）

fade out animation

FadeOutAnimation(
  animateDirection: AnimateDirection.right, // 设置动画方向为从右到左
  child: SomeWidget(), // 替换为你自己的组件
);

2.3 SlideIn（滑入）

slide in animation

SlideInAnimation(
  animateDirection: AnimateDirection.left, // 设置动画方向为从左到右
  child: SomeWidget(), // 替换为你自己的组件
);

2.4 ScaleIn（缩放进入）

scale in animation

ScaleInAnimation(
  child: SomeWidget(), // 替换为你自己的组件
);

2.5 Shake（摇晃）

shake animation

ShakeAnimation(
  isHorizontal: true, // 设置是否水平摇晃
  child: SomeWidget(), // 替换为你自己的组件
);

2.6 Bounce（弹跳）

bouce animation

BouncingAnimation(
  developerMode: true, // 开启开发者模式
  child: SomeWidget(), // 替换为你自己的组件
);

2.7 Fluffy（轻盈浮动）

fluffy animation

FluffyAnimation(
  child: SomeWidget(), // 替换为你自己的组件
);

2.8 Pulse（脉冲）

Pluse animation

PulseAnimation(
  child: SomeWidget(), // 替换为你自己的组件
);

3. 自定义动画

你可以通过设置不同的属性来自定义动画效果。例如，你可以自定义 FadeInAnimation 的方向、类型、持续时间和移动距离等。

FadeInAnimation(
  animateDirection: AnimateDirection.right, // 设置动画方向
  animateType: AnimateType.loop, // 设置动画类型为循环
  durationMilliseconds: 300, // 设置动画持续时间为300毫秒
  moveAmount: 200, // 设置动画移动距离为200
  child: MockBox(), // 替换为你自己的组件
);

属性	值	描述
`animateDirection`	`AnimateDirection.top`, `AnimateDirection.right`, `AnimateDirection.bottom`, `AnimateDirection.left`, `AnimateDirection.none`	定义动画的方向
`animateType`	`AnimateType.once`, `AnimateType.loop`, `AnimateType.mirror`	定义动画的类型
`durationMilliseconds`	`double`	定义动画的持续时间（毫秒）
`moveAmount`	`double`	定义动画的移动距离
`delay`	`Duration`	定义动画的延迟时间

4. 开发者模式

你可以在开发者模式下查看动画效果，这对于调试非常有帮助。只需将 AnimationDeveloperTools 作为父组件，并启用 developerMode 即可。

AnimationDeveloperTools(
  child: PulseAnimation(
    developerMode: true, // 不要忘记这行！
    child: SomeWidget(), // 替换为你自己的组件
  ),
);

5. 完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 easy_animate 插件来创建一个包含多种动画效果的应用程序。用户可以通过下拉菜单选择不同的动画效果，并实时预览。

import 'package:easy_animate/animation/bouncing_animation.dart';
import 'package:easy_animate/enum/animate_direction.dart';
import 'package:flutter/material.dart';
import 'package:easy_animate/mock/mock_box.dart';
import 'package:easy_animate/animation/pulse_animation.dart';
import 'package:easy_animate/animation/shake_animation.dart';
import 'package:easy_animate/animation/scale_in_animation.dart';
import 'package:easy_animate/animation/fade_in_animation.dart';
import 'package:easy_animate/animation/fade_out_animation.dart';
import 'package:easy_animate/animation/slide_in_animation.dart';
import 'package:easy_animate/animation/stamp_in_animation.dart';
import 'package:easy_animate/animation/fluffy_animation.dart';

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

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final List<String> list = [
    'BouncingAnimation',
    'ScaleInAnimation',
    'StampInAnimation',
    'ShakeAnimation( isHorizontal : true)',
    'ShakeAnimation( isHorizontal : false)',
    'FadeInAnimation( animateDirection : none)',
    'FadeInAnimation( animateDirection : top)',
    'FadeInAnimation( animateDirection : right)',
    'FadeInAnimation( animateDirection : bottom)',
    'FadeInAnimation( animateDirection : left)',
    'FadeOutAnimation( animateDirection : none)',
    'FadeOutAnimation( animateDirection : top)',
    'FadeOutAnimation( animateDirection : right)',
    'FadeOutAnimation( animateDirection : bottom)',
    'FadeOutAnimation( animateDirection : left)',
    'SlideInAnimation ( animateDirection : left)',
    'PulseAnimation',
    'FluffyAnimation',
  ];

  String selectedValue = 'BouncingAnimation';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: AnimationDeveloperTools(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Center(child: animationSelector(selectedValue)),
                const SizedBox(height: 40),
                DropdownButton(
                  value: selectedValue,
                  items: list.map<DropdownMenuItem<String>>((String dropButtonValue) {
                    return DropdownMenuItem<String>(
                      value: dropButtonValue,
                      child: Text(dropButtonValue),
                    );
                  }).toList(),
                  onChanged: ((String? value) {
                    setState(() {
                      selectedValue = value!;
                    });
                  }),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Widget animationSelector(String selectedValue) {
  switch (selectedValue) {
    case 'BouncingAnimation':
      return const BouncingAnimation(
        developerMode: true,
        child: MockBox(),
      );

    case 'ScaleInAnimation':
      return const ScaleInAnimation(
        developerMode: true,
        child: MockBox(),
      );

    case 'StampInAnimation':
      return const StampInAnimation(
        developerMode: true,
        child: MockBox(),
      );

    case 'ShakeAnimation( isHorizontal : true)':
      return const ShakeAnimation(
        developerMode: true,
        isHorizontal: true,
        child: MockBox(),
      );

    case 'ShakeAnimation( isHorizontal : false)':
      return const ShakeAnimation(
        developerMode: true,
        isHorizontal: false,
        child: MockBox(),
      );

    case 'FadeInAnimation( animateDirection : none)':
      return const FadeInAnimation(
        developerMode: true,
        animateDirection: AnimateDirection.none,
        child: MockBox(),
      );

    case 'FadeInAnimation( animateDirection : top)':
      return const FadeInAnimation(
        developerMode: true,
        animateDirection: AnimateDirection.top,
        child: MockBox(),
      );

    case 'FadeInAnimation( animateDirection : right)':
      return const FadeInAnimation(
        developerMode: true,
        animateDirection: AnimateDirection.right,
        child: MockBox(),
      );

    case 'FadeInAnimation( animateDirection : bottom)':
      return const FadeInAnimation(
        developerMode: true,
        animateDirection: AnimateDirection.bottom,
        child: MockBox(),
      );

    case 'FadeInAnimation( animateDirection : left)':
      return const FadeInAnimation(
        developerMode: true,
        animateDirection: AnimateDirection.left,
        child: MockBox(),
      );

    case 'SlideInAnimation ( animateDirection : left)':
      return const SlideInAnimation(
        developerMode: true,
        animateDirection: AnimateDirection.left,
        child: MockBox(),
      );

    case 'FadeOutAnimation( animateDirection : none)':
      return const FadeOutAnimation(
        developerMode: true,
        animateDirection: AnimateDirection.none,
        child: MockBox(),
      );

    case 'FadeOutAnimation( animateDirection : top)':
      return const FadeOutAnimation(
        developerMode: true,
        animateDirection: AnimateDirection.top,
        child: MockBox(),
      );

    case 'FadeOutAnimation( animateDirection : right)':
      return const FadeOutAnimation(
        developerMode: true,
        animateDirection: AnimateDirection.right,
        child: MockBox(),
      );

    case 'FadeOutAnimation( animateDirection : bottom)':
      return const FadeOutAnimation(
        developerMode: true,
        animateDirection: AnimateDirection.bottom,
        child: MockBox(),
      );

    case 'FadeOutAnimation( animateDirection : left)':
      return const FadeOutAnimation(
        developerMode: true,
        animateDirection: AnimateDirection.left,
        child: MockBox(),
      );

    case 'PulseAnimation':
      return const PulseAnimation(
        developerMode: true,
        child: MockBox(),
      );

    case 'FluffyAnimation':
      return const FluffyAnimation(
        developerMode: true,
        child: MockBox(),
      );

    default:
      return const BouncingAnimation(
        developerMode: true,
        child: MockBox(),
      );
  }
}

更多关于Flutter动画效果插件easy_animate的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

phonegap100 1楼•1 天前

更多关于Flutter动画效果插件easy_animate的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，easy_animate 是一个用于简化 Flutter 中动画效果的插件。下面是一个简单的示例，展示如何使用 easy_animate 来创建动画效果。

首先，确保在 pubspec.yaml 文件中添加 easy_animate 依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_animate: ^最新版本号  # 请替换为实际的最新版本号

然后，运行 flutter pub get 来获取依赖。

以下是一个使用 easy_animate 创建简单动画效果的示例代码：

import 'package:flutter/material.dart';
import 'package:easy_animate/easy_animate.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Easy Animate Demo'),
        ),
        body: Center(
          child: AnimatedWidgetDemo(),
        ),
      ),
    );
  }
}

class AnimatedWidgetDemo extends StatefulWidget {
  @override
  _AnimatedWidgetDemoState createState() => _AnimatedWidgetDemoState();
}

class _AnimatedWidgetDemoState extends State<AnimatedWidgetDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        // 使用 EasyAnimate 包装一个普通的 Flutter 组件，并应用动画
        EasyAnimate(
          animation: _controller,
          curve: Curves.easeInOut,
          builder: (context, animation) {
            return AnimatedBuilder(
              animation: animation,
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
              builder: (context, child) {
                final double value = animation.value;
                return Transform.scale(
                  scale: value,
                  child: child,
                );
              },
            );
          },
        ),
        SizedBox(height: 20),
        // 使用 EasyAnimate 的便利方法创建淡入淡出动画
        EasyAnimate.fadeInOut(
          animation: _controller,
          curve: Curves.easeInOut,
          duration: const Duration(seconds: 1),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
      ],
    );
  }
}

代码说明：

依赖引入：在 pubspec.yaml 中添加 easy_animate 依赖。
动画控制器：在 _AnimatedWidgetDemoState 中创建并初始化一个 AnimationController。
动画包装：
- 使用 EasyAnimate 包装一个普通的 Flutter 组件（如 Container），并应用缩放动画。
- 使用 EasyAnimate.fadeInOut 便利方法创建淡入淡出动画。
动画构建：在 EasyAnimate 的 builder 回调中，使用 AnimatedBuilder 根据动画值构建 UI。

这个例子展示了如何使用 easy_animate 插件来简化动画效果的创建。你可以根据需求进一步调整和扩展动画效果。