Flutter Package: flutter_animate

Flutter package: flutter_animate

A performant library that makes it simple to add almost any kind of animated effect in Flutter.

Pre-built effects, like fade, scale, slide, flip, blur, shake, shimmer, shadows, crossfades, and color effects (saturation, color, and tint)
Easy custom effects and simplified animated builders
Synchronize animations to scroll, notifiers, or anything
Integrated events
All via a simple, unified API without fussing with AnimationController and StatefulWidget.

它提供了一种简单的方式来添加各种动画效果。该库提供了预构建的效果，如淡入淡出、缩放、滑动、翻转、模糊、震动、闪烁、阴影、交叉淡化和颜色效果（饱和度、颜色和色调）。此外，该库还提供了易于自定义的效果和简化的动画构建器，可以将动画与滚动、通知器或任何其他内容同步。此外，该库还集成了事件处理功能。所有这些功能都可以通过一个简单且统一的API来实现，而无需处理AnimationController和StatefulWidget等技术术语。

添加动画效果

Animate(
  effects: [FadeEffect(), ScaleEffect()],
  child: Text("Hello World!"),
)

或者是

Text("Hello World!").animate().fade().scale()

添加Delay, duration, curve

Effects have optional delay, duration, and curve parameters. Effects run in parallel, but you can use a delay to run them sequentially:

效果具有可选的延迟、持续时间和曲线参数。效果并行运行，但您可以使用延迟按顺序运行它们：

Text("Hello").animate()
  .fade(duration: 500.ms)
  .scale(delay: 500.ms) // runs after fade.

先渐变显示，持续0.5s，再放大

Animate 有自己的延迟参数，它定义了动画开始播放之前的延迟。与 Effect 上的延迟不同，它仅在动画重复时应用一次。

Text("Hello").animate(
    delay: 1000.ms, // this delay only happens once at the very start
    onPlay: (controller) => controller.repeat(), // loop
  ).fadeIn(delay: 500.ms) // this delay happens at the start of each loop

大多数效果包括开始和结束参数，它们指定开始/结束值。 这些通常是“智能”的，因为如果只指定一个，那么另一个将默认为“中性”值（即没有视觉效果）。 如果两者都未指定，则效果应使用视觉上令人愉悦的默认值。

// an opacity of 1 is "neutral"
Text("Hello").animate().fade() // begin=0, end=1
Text("Hello").animate().fade(begin: 0.5) // end=1
Text("Hello").animate().fade(end: 0.5) // begin=1

许多效果具有影响其行为的附加参数。 如果未指定，这些也应该使用令人愉快的默认值。

Text('Hello').animate().tint(color: Colors.purple)

ThenEffect 是一种特别方便的“效果”，可以更轻松地对效果进行排序。 它通过建立一个新的基线时间来实现这一点，该时间等于前一个效果的结束时间和它自己的可选延迟。 所有后续效果延迟都与此新基线相关。

在以下示例中，slide动画将在fadeIn动画结束后 200 毫秒后运行。

Text("Hello").animate()
  .fadeIn(duration: 600.ms)
  .then(delay: 200.ms) // baseline=800ms
  .slide()

动画列表

AnimateList 类为小部件列表提供了类似的功能，可以选择将每个子项的动画偏移指定的interval：

Column(children: AnimateList(
  interval: 400.ms,
  effects: [FadeEffect(duration: 300.ms)],
  children: [Text("Hello"), Text("World"),  Text("Goodbye")],
))

// or shorthand:
Column(
  children: [Text("Hello"), Text("World"),  Text("Goodbye")]
    .animate(interval: 400.ms).fade(duration: 300.ms),
)

更方便的Duration参数

封装了一套自己的Duration

/// Adds extensions to num (ie. int & double) to make creating durations simple:
///
/// ```
/// 200.ms // equivalent to Duration(milliseconds: 200)
/// 3.seconds // equivalent to Duration(milliseconds: 3000)
/// 1.5.days // equivalent to Duration(hours: 36)
/// ```
extension NumDurationExtensions on num {
  Duration get microseconds => Duration(microseconds: round());
  Duration get ms => (this * 1000).microseconds;
  Duration get milliseconds => (this * 1000).microseconds;
  Duration get seconds => (this * 1000 * 1000).microseconds;
  Duration get minutes => (this * 1000 * 1000 * 60).microseconds;
  Duration get hours => (this * 1000 * 1000 * 60 * 60).microseconds;
  Duration get days => (this * 1000 * 1000 * 60 * 60 * 24).microseconds;
}

可以直接通过 500.ms , 1.seconds , 3.hours 便捷访问Duration

Custom effects

Text("Hello World").animate().custom(
  duration: 300.ms,
  builder: (context, value, child) => Container(
    color: Color.lerp(Colors.red, Colors.blue, value),
    padding: EdgeInsets.all(8),
    child: child, // child is the Text widget being animated
  )
)

通过 .custom 来自定义动画，builder 中的 child 就是 .animate 之前的 widget ，在这里也就是 Text('hello world')

也可以不传 child

Animate()
              .custom(
                duration: 3.seconds,
                begin: 3,
                end: 0,
                builder: (_, double value, __) =>
                    Text(value.round().toString()),
              )
              .fadeOut()

以上代码定义了一个倒数3秒的 fadeOut 动画

Events & callbacks

Animate 包括以下回调：

• onInit：内部 AnimationController 已经初始化
• onPlay：动画在任何 Animate.delay 之后开始播放
• onComplete：动画结束

const Text('Horrible Pulsing Text')
              .animate(
                onPlay: (AnimationController controller) => log('onPlay'),
                onInit: (AnimationController controller) => log('onInit'),
                onComplete: (AnimationController controller) =>
                    log('onComplete'),
              )
              .fadeOut(curve: Curves.easeInOut)

CallbackEffect

CallbackEffect 允许将回调添加到动画中的任意位置。例如，在淡入淡出中途添加回调：

Text("Hello").animate().fadeIn(duration: 600.ms)
  .callback(duration: 300.ms, callback: (_) => print('halfway'))

ListenEffect

ListenEffect 允许注册回调以接收给定延迟、持续时间、曲线、开始和结束的动画值。

Text("Hello").animate().fadeIn(curve: Curves.easeOutExpo)
  .listen(callback: (value) => print('current opacity: $value'))

会实时打印当前的 value

flutter: current opacity: 0.2842084765434265
flutter: current opacity: 0.523162841796875
flutter: current opacity: 0.6967048645019531
flutter: current opacity: 0.804809145629406
flutter: current opacity: 0.875
flutter: current opacity: 0.9184828400611877
flutter: current opacity: 0.9464373514056206
flutter: current opacity: 0.9652991965413094
flutter: current opacity: 0.977752685546875
flutter: current opacity: 0.9861354604363441
flutter: current opacity: 0.9917394081130624
flutter: current opacity: 0.995261013507843
flutter: current opacity: 0.9974988223984838
flutter: current opacity: 0.998826801776886
flutter: current opacity: 0.9995408216491342
flutter: current opacity: 0.9998764591291547
flutter: current opacity: 0.9999854480847716
flutter: current opacity: 1.0

Reacting to State Changes

可以根据状态来控制动画，添加 target

Column(
        children: [
          TextButton(
              onPressed: () {
                _over = !_over;
                setState(() {});
              },
              child: const Text('tap')),
          Text('$_over').animate(target: _over ? 1 : 0.1).scaleXY(end: 2)
        ],
      )

创建变量 _over，点击按钮改变 _over ， _over 改变时改变 animate 的 scale 的初始值(1或者0.1)