flutter_villains

灵活易用的页面过渡效果。

查看文档

flutter_villains

什么是 villains？

你总是看到漂亮的页面过渡，但你觉得那些太费事了？

别害怕，villains 来拯救你了！

当进行页面过渡动画时，你通常会在 `initState()` 中定义一个 `AnimationController` 并在那里启动它。你还必须将你的小部件包装在 `AnimatedWidgets` 中以响应 `AnimationController`。除了这会产生很多重复的代码，堵塞你宝贵的小部件之外，退出时的动画也没有那么简单。

使用这个库，你只需将你希望在页面过渡时被动画化的小部件包装在 `Villain` 中，所有事情都会自动处理。

安装

dependencies:
  flutter_villains: "^1.0.0"

运行 packages get 并 **导入**

import 'package:flutter_villains/villain.dart';

组装风格化的页面

定义页面打开时播放的动画。

易于使用

      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,
        ),
      ),

就是这样。没有 `TickerProvider`，没有 `AnimationController`，没有重复代码，没有烦恼。
还记得 StaggeredAnimation 教程吗？这个库内部使用了 SequenceAnimation，因此无需指定时间帧的持续时间。它就是能用。

通过这个基本设置，当页面过渡发生时，`Divider` 会淡入并向上移动（不要忘记 `VillainTransitionObserver`，更多关于它的信息在 *代码* 下面）。

Flexible

你想要的动画不是预制的？用几行代码自己制作吧！

  static VillainAnimation fade(
          {double fadeFrom = 0.0,
          double fadeTo = 1.0,
          Duration from = Duration.zero,
          Duration to: _kMaterialRouteTransitionLength,
          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,
            );
          });

每个 `VillainAnimation` 都需要一个 `Animatable`（大多数情况下是 `Tween`）和一个 `AnimatedWidget`。其他一切都自动处理。

代码

有两种方式播放你的 villains。

  1. 如果你希望它们在页面过渡时自动播放（你很可能想要这样），请将其添加到你的 `MaterialApp` 中
    return new MaterialApp(
      navigatorObservers: [new VillainTransitionObserver()],
  1. 在给定的上下文中手动播放 villains。
    VillainController.playAllVillains(context);

次级动画

每个 `Villain` 最多可以播放两个动画。你可以随时将 Villains 相互包装以实现*无限*动画！

    Villain(
      villainAnimation: VillainAnimation.fromBottomToTop(0.4, to: Duration(milliseconds: 150)),
      animateExit: false,
      secondaryVillainAnimation: VillainAnimation.fade,
      child: Text(
        "Hi",
        style: Theme.of(context).textTheme.body1,
      ),
    ),

附加

定义 villain 是否应在进入/退出时播放。

    animateEntrance: true,
    animateExit: true,

当手动使用 `VillainController` 时，它会检查此布尔值以确定是否应进行动画。

  static Future playAllVillains(BuildContext context, {bool entrance = true})

进入页面的 villains 与页面过渡是解耦的，这意味着它们可以任意长
希望。另一方面，如果一个 villain 离开页面，动画由页面过渡驱动。
这意味着

  • 退出动画的长度始终与退出页面过渡相同
  • 设置持续时间不会改变任何内容

示例

看看示例文件夹中的三个精彩示例。

特点

villain 框架负责

  • 管理页面过渡回调
  • 提供动画
  • 提供预制的常见动画

与现实世界的 villains 不同，这些 villains **非常**容易处理。

控制器

目前没有实现控制器可以单独播放每个 villain。如果你希望实现这一点，我开了一个讨论它的 issue。快来看看！

GitHub

https://github.com/Norbert515/flutter_villains