Flutter之flutter_animate

想要在不处理动画控制器的情况下，为Flutter应用程序快速地添加精美的预置动画吗？那不妨试试flutter_animate。

请用Animate小部件来包装并提供效果列表,就是这样！搞定了！

Animate(
    effects: [FadeEffect(), SlideEffect()]
    child: Text('Hello World!')
)

用链式语法也可达到相同的结果

Text('Hello World!')
    .animate()
    .fade()
    .slide()

若不喜欢默认的动画，你可就时间点之类的稍加调整,

设置delay、duration或curve这些函数

Text('Hello World!')
    .animate()
    .fade(delay: 500.ms)
    .slideY()

Text('Hello World!')
    .animate()
    .fade(duration: 2000.ms)
    .slideY()

Text('Hello World!')
    .animate()
    .fade()
    .slideY(cure: Curves.easeIn)

flutter_animate还为num类加入实用的扩展方法让时长更容易设置

动画多有参数begin和end来控制动画的开始和结束状态

无论是滑动效果slide的定位

Text('Hello World!')
    .animate()
    .slideY(begin:2, end: 5)

或是淡入淡出效果的不透明度 ``` Text('Hello World!') .animate() .fade(begin: .1, end: .8) ```

许多动画都为这类特效提供了额外的参数

Text('Hello World!')
    .animate()
    .tint(color: Colors.amber)

要依序链接所属效果请使用扩展方法then(),它会等待之前的动画效果都跑完后才会继续执行后续的效果。

Text('Hello World!')
    .animate()
    .tint(color: Colors.amber)
    .then()
    .shake()

你也可以将动画添加到小部件的列表中，将小部件包装在Animate列表中或使用扩展方法animate()，指定间隔参数interval，让Animate列表中的效果交错执行

[Widget, Widget, Widget]
    .animate(interval: .250.seconds)
    .slideX()

最后，若希望扩展依状态变化反应，请以target目标值参数来指定开始执行动画的确切时间

Text('Hello World!')
    .animate(target: _counter == 6 ? 1 : 0)
    .slideX()

原文翻译自视频：视频地址