Flutter 简化页面过渡动画插件flutter_villains的使用

概述

flutter_villains 是一个用于简化页面过渡动画的Flutter插件。它允许开发者轻松地为页面中的小部件添加进入和退出动画，而无需编写复杂的AnimationController代码。这个插件非常适合那些想要快速实现美观动画效果但又不想陷入繁琐配置的开发者。

功能亮点

• 自动处理页面过渡动画：只需将需要动画的小部件包裹在Villain中，所有动画逻辑都会被自动处理。
• 灵活定制：如果预设的动画不满足需求，可以自定义动画。
• 支持二次动画：每个Villain可以同时播放两个动画。
• 简单易用：无需手动管理TickerProvider或AnimationController。

安装

首先，在您的pubspec.yaml文件中添加依赖：

dependencies:
  flutter_villains: "^1.2.1"

然后运行flutter packages get并导入库：

import 'package:flutter_villains/villain.dart';

使用示例

基本使用

以下是一个简单的例子，展示了如何使用flutter_villains来给一个Divider小部件添加从底部进入的动画效果。

import 'package:flutter/material.dart';
import 'package:flutter_villains/villain.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [VillainTransitionObserver()],
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Villains Example')),
        body: Center(
          child: Villain(
            villainAnimation: VillainAnimation.fromBottom(
              relativeOffset: 0.4,
              from: Duration(milliseconds: 100),
              to: Duration(seconds: 1),
            ),
            animateExit: false,
            secondaryVillainAnimation: VillainAnimation.fade(),
            child: Divider(
              color: Colors.black,
              height: 32.0,
            ),
          ),
        ),
      ),
    );
  }
}

自定义动画

如果你对默认提供的动画不满意，可以通过自定义Animatable和AnimatedWidgetBuilder来创建自己的动画。

static VillainAnimation fade({
  double fadeFrom = 0.0,
  double fadeTo = 1.0,
  Duration from = Duration.zero,
  Duration to = const Duration(milliseconds: 500),
  Curve curve = Curves.linear,
}) =>
    VillainAnimation(
      from: from,
      curve: curve,
      to: to,
      animatable: Tween<double>(begin: fadeFrom, end: fadeTo),
      animatedWidgetBuilder: (animation, child) {
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      },
    );