本文为稀土技能社区首发签约文章，14天内制止转载，14天后未获授权制止转载，侵权必究！

首要，这次会写一个新的系列《Flutter 工程化结构挑选》，可是系列其实并非前端的工程治理方面的内容，这个系列只是单纯告诉你，创立一个 Flutter 工程，或许说建立一个 Flutter 工程脚手架，应该怎么挑选快速合适自己的插件模块，或许说这是一个指引系列，信任会合适新手同学。

为什么会想要写一个这样的系列？因为这类的问题太多了，简略检索一个群的聊天记录，单单 有没有 这个关键字就能够搜索翻好几页，所以这个系列的目的，是帮咱们收拾 Flutter 工程里或许会需求的各种第三方模块，并对比一些技能细节，也是便利以后答复问题我能够直接甩链接。

首要作为系列第一篇文章，本篇咱们先聊动画。

为什么第一篇聊它，因为近期刚好做了一些关于 Flutter 动画的调研，不久前也刚好发布过一些关于它的内容，所以资料比较多，而本篇将针对你或许会遇到的动画场景，给你引荐各式各样的动画结构来加快开发。

前语

在之前的 Flutter 小技巧 系列里咱们聊过，假如没有运用封装， Flutter 里创立动画一般需求：

  • AnimationController ： 用于操控动画启动、暂停
  • TickerProvider ： 用于创立 AnimationController 所需的 vsync 参数，一般最常运用 SingleTickerProviderStateMixin
  • Animation ： 用于处理动画的 value ，例如常见的 CurvedAnimation
  • 接收动画的目标：例如 FadeTransition

这种写法如下代码所示，咱们一般能够称为显式动画（不要纠结名词叫法），大致特征便是：以 *Transition 命名，比如 FadeTransition 、SizeTransition 和 RotationTransition 等，需求咱们自己界说和操作 AnimationController 。

class _AnimatedOpacityState extends State<AnimatedOpacity>
    with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.easeIn,
  );
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: FadeTransition(
        opacity: _animation,
        child: const Padding(padding: EdgeInsets.all(8), child: FlutterLogo()),
      ),
    );
  }
}

可是，假如都采用这种方法去运用动画，那么项目里就会存在许多的重复代码，所以 Flutter 官方默认供给了一些动画封装，也能够叫做隐式动画（不要纠结名词叫法）：

也便是开箱即用，常见是 Animated* 开头的 Widget，例如 AnimatedPositioned 、AnimatedContainer 、 AnimatedPadding 、AnimatedOpacity 等控件，它们最大的特色便是内部现已完全封装好逻辑，你只需求装备对应参数就能够触发动画。

如下代码所示，你只需求改变 _width 和 _height 就能够触发动画作用，动画中心过程的数据会经过 Curves 变化的 “插值” 来得到。

body: Center(
  child: AnimatedContainer(
    width: _width,
    height: _height,
    decoration: BoxDecoration(
      color: _color,
      borderRadius: _borderRadius,
    ),
    duration: Duration(seconds: 1),
    curve: Curves.fastOutSlowIn,
  ),
),

虽然隐式动画挺便利，但真实的项目里或许许多状况仍是不满咱们的需求，往往业务逻辑会需求更灵活或许更详尽的封装，那么这就要聊到本篇后面的内容。

基础动画

提到基础动画的部分，首要便是在隐式动画的基础上进一步的封装，能够经过简略装备快速完结一些更精美的动画作用。

animations

animations 是官方封装的动画库，首要卖点在于 Material 风格的动画过渡，所以这个库的中心重点是路由过渡动画或许页面切换动画，例如下图便是 Demo 里运用库里自带的 OpenContainer 完结页面跳转的 Material 过渡 作用。

别的也能够运用 PageTransitionSwitcher 完结一些非路由的页面切换动画，能够理解为是一个变异版别的 AnimatedSwitcher ，或许是 Stack 版动画 PageView ，不过支撑自界说进入和退出动画，还能够支撑自界说布局，一般默认运用默认 defaultLayoutBuilder 的话，便是运用 Stack 作为布局。

官方 Demo 里也会运用 PageTransitionSwitcher 来做步进页面跳转的作用，所以 animations 的中心动画才能首要是在于页面过渡方面。

总的来说，这个库是官方维护，值得信任。

simple_animations

simple_animations 如同它的姓名所示，它首要是简化了自界说动画的过程，正如前面所示，在 Flutter 里运用动画，咱们一般需求界说 AnimationController 、Animatable 和 Animation 等目标来装备动画作用。

而 simple_animations 供给了 AnimationMixin 目标，如下代码所示，你只需求经过 with 关键字就能够简化接入动画的代码。

一起 simple_animations 也供给了各种 Builder 来简化，例如运用 MirrorAnimationBuilder 就能够完结一个循环反复的动画作用。

所以 simple_animations 针对显式动画进行了优化封装，在更便利的状况下做到能更灵活操控动画作用，如下图所示，在 gsy_fluter_demo 里就运用了 simple_animations 来完结一些动画作用：

  • MirrorAnimation 和 MovieTween 完结突变的背景
  • LoopAnimation 和 MovieTween 完结了粒子动画

不过这个库有个小问题，便是它最近几次大版别，每个版别总是会有一些 break change ，可是或许便是改改姓名，换换参数方位，假如你一段时间没关注，再晋级或许会有些成本。

animate_do

animate_do 是一个轻量级动画包，它比 simple_animations “更懒”，代码也相对简略许多，内部供给了丰厚的动画封装 Widget 可直接运用。

你能够理解为更丰厚的隐式动画。

animate_do 便是经过 AnimatedBuilder 协作 Transform 、Opacity 进行了封装，然后开发者能够经过 FlipInX 、FadeInDown 、ElasticIn 等目标直接完结动画作用。

既然 animate_do 十分简略，那为什么会引荐它呢？因为它真的很有用。

首要简略代表着好维护，作者不玩了咱们自己也能接，其次 animate_do 供给了适当丰厚的封装，这对于懒人来说它真的很有用，特别是对于一些 “相对复杂” 的动画作用上（如下图3）能够节省许多时间，特别是在 Tween 和 CurvedAnimation的封装上。

现在有一段时分没更新，可是问题不大～ 同类型的库还有 spring ，能够作为替代项目，也完结了相似的封装。

UI 动画

介绍完基础动画作用，接下来引荐一些常用的动画结构，因为经常有人问到有没有xxx 的完结能够直接拿来运用，秉承着有做好的就不自己动手原则，下面这些 UI 动画结构，也许在你开发过程中就会需求用到。

UI 动画部分就不介绍完结了，首要就看功能符不符合你需求。

数字动画

首要是数字动画，常见的有 flutter-animated-counter ，自身它就供给了丰厚的 API 和动画作用，相似的第三方库还有 odometer 和 animated_digit 等，详细能够自己按需挑选。

跑马灯

既然聊到文字动画，就不得不说跑马灯，如下表格所示是 Flutter 里常用到的文字跑马灯的第三方 package ，其中 marquee_widget 供给的接口相对更佳丰厚。

marquee_widget text_scroll marquee_text

加载动画

加载动画是最常见的 UI 动画，假如你没有设计师，假如你不知道 loading 动画用什么好，那你能够考虑下面几个 package，这三个 loading 库都是纯代码完结，供给了丰厚的款式挑选。

flutter_spinkit loading_animation_widget loading_indicator

纯代码完结有什么优点？当款式需求做一些简略调整时，作为开发者能够经过代码快速修正，这是我喜爱纯代码完结动画的原因。

指引动画

指引动画也是常见的需求之一，根本完结都会经过 Overlay 来完结，不同的或许便是动画作用和定位方法的差异，详细也能够依照自己的需求挑选。

feature_discovery flutter_showcaseview flutter_intro BubbleShowcase

列表动画

列表动画也是常见的 UI 动画才能之一，根本上 Flutter 上最常见用都的第三方列表动画库便是下面表格里这三个，坑仍是有的，可是“又不是不能用”。

flutter_staggered_animations animation_list transformable_list_view

3D 立体动画

这个类目或许关注的人反而不是许多，可是恰好是我近期比较关注的动画完结，这儿首要引荐两个运用矩阵改换制作 3D 视觉作用的第三方库，它们不同在于：

  • zwidget 才能相对比较弱，直接运用的是 Transform 的才能
  • zflutter 来源于前端 zdog 项目，是直接对 Canvas 的 path 进行矩阵改换
zflutter zwidget

在不久前我也写过一篇文章 《Flutter 完结 “真” 3D 动画作用》，内容首要分析了 zflutter 的完结逻辑和怎么运用 zflutter ，运用纯代码烘托 3D 作用的动画。

当然，上门两个 3D 动画，它们在运用上相对会比较复杂，假如需求更高档的动画作用，建议看下面的引荐。

高档动画支撑

介绍完面向程序员的动画支撑之后，最后咱们来介绍两个面向设计师的动画支撑库，一起也是更好支撑复杂动画完结的库。

Lottie

Lottie 信任咱们不会生疏，airbnb 最优异的动画开源库，设计师能够经过 AE 插件导出设计好的动画作用，然后运用渠道的 Canvas 等才能烘托出 AE 上的动画作用。

运用 Lottie 的优点在于，设计师能够更自在的去测验更炫酷的动画，而程序员只需求关心怎么操控动画（时长，循环，方向，帧率等），一起因为动画大部分时分都是矢量数据，所以 Lottie 文件相对不大。

在早期的时分，因为 Lottie 自身只支撑原生渠道，所以 Flutter 上都是经过外界纹路或许 PlatformView 等形式接入，这样的结果便是导致各种性能和兼容问题，好在现在 lottie-flutter 现已支撑 Dart Canvas 的原生 API 。

当然， Lottie 自身的问题也很明显，那便是你的交互设计师要会 AE ，很惋惜的是，我触摸的大部分设计师都不会 AE ，并且会 AE 还不够，还需求会 Bodymovin 插件相关的兼容，了解什么属性能够用，全体开发环境也比较重。

Rive

对于 rive 或许咱们会感觉比较生疏，而做过 Flutter 开发的或许对 rive 会有所耳闻，因为 rive 在此之前叫 flare ，是 2dimensions 公司的开源动画产品，在发布之初因为和 Flutter 团队有深化协作，所以在初期一直是 Flutter 官方引荐的动画结构。

rive 同样是一个面向设计师的动画结构，只不过他是在 Web Editor 里进行 UI 编列和动画制作，所以他在开发环境上相对会轻量化。

img img

一起 rive 同样是经过导出矢量的动画数据文件（也能够包括一些静态资源），然后运用渠道的 Canvas 来完结动画作用，所以它的占用提及也不会很大。

别的 rive 现在也是全渠道支撑， Android、 iOS、Web、Desktop、Flutter 、React、Vue、C++ 等都在支撑范围之内。

假如想深化了解 rive ，也能够看我之前的 《给 Logo 快速添加动画作用》 ，其实对于程序员来说，rive 一起很好上手。

现在 rive 的问题是，第二代 rive 和第一代 flare 存在断档不兼容，并且根本能够忽略迁移的或许，一起没有本地化免费开发 IDE 有时分也是一种麻烦。

好了，关于 Flutter 动画相关的内容引荐就到这儿，假如你还有什么关于 Flutter 工程或许结构的疑问，欢迎留言谈论，也许又能够多一期的资料～