Flutter中的千变万化——Flare动画

柳随风

发布于 2020-9-7 13:04

浏览

0收藏

开篇

在我们的日常开发中，为了给我们的产品塑造更好的形象，产出更好的用户体验，动画🖼 是不可或缺的一环。一个好的动画可以让交互更加的简洁，让用户更好理解我们的意图。所以如何添加动画，添加怎样的动画一直都是俺们程序员的难题🔧 ，其实在我之前的有关绘制的博客、有关贝塞尔曲线的博客中已经有一些动画的苗头了，只是没有展开来说。

但是不知道各位有没有思考过这样的问题，我们接触的App中的那些炫酷的动画，难道仅仅是程序员的产出吗🤔 ？有没有那么一瞬间，你会怀疑，有一些他肯定不是用代码撸出来的😑 ?比如说～这种？

Flutter中的千变万化——Flare动画-鸿蒙开发者社区

这你要是和我说您是纯代码描的路径 ➕ 系统自带动画控制，我是绝对绝对不相信的🤣 ，就算你能实现，也是极大的拖慢了开发进度，让我们开始怀疑添加动画的收益是否为正向收益📌。

那么大多数这些复杂的动画是如何更好的实现的呢？

要知道我们是一个Team，不是孤军奋战，我们忘了一个很重要的伙伴👬 —— 美工人员。今天我们要介绍的工具就能让我们很好的与美工人员进行合作，方便我们生成炫酷多样的动画——Flare!

正文开始

起源

其实为什么会找到Flare呢，主要是我之前在做iOS开发的时候使用过一个动画库，做过iOS开发的小伙伴可能比较熟悉是Airbnb的Lottie。其实Flare和Lottie我个人觉得还是很像的，都是旨在更好的将设计人员和开发人员的工作相结合🐳。

step 1: Rive 让你的应用栩栩如生
Rive这个网站就是我们的起源点，进入网站，注册账号，就会有一个个人的工作台 🚀

Flutter中的千变万化——Flare动画-鸿蒙开发者社区

然后我们点击右上角新建一个项目就可以打开画板了🖼

Flutter中的千变万化——Flare动画-鸿蒙开发者社区

打开是打开了，但～一脸懵逼🙃 ，有没有？但是别慌，以上步骤我是介绍给美工小伙伴的，到这一步接下来是美工的事情了，由美工去设计和绘制动画。

不会用这个画板或者网站类工具的美工伙伴建议Google一下教程很多。在我的印象里很多美工只会简单的切图、抄图，我认为这不是美工，或者不能算是一个合格的设计人员。如果一个美工想要出众、想要获得更多的认可，或者是职业生涯走的更好，和任何职业一样都应该保持学习。

亲测！之前和我合作过的美工人员上手这个画板非常快，所以各位也不用担心美工人员有很大的学习成本👀 。

step 2: Explore 发现美好
等美工伙伴制作好动画之后，就轮到我们干活儿了💪 。我们可以在网站左上角的Explore里找到一个动图先做一个示范。

Flutter中的千变万化——Flare动画-鸿蒙开发者社区

我们选中右边栏的OPEN IN Rive按钮🔘 即可在画板中打开这个动画文件。

Flutter中的千变万化——Flare动画-鸿蒙开发者社区

这边有两个注意点：

在右上角可以选择Export进行导出，切记❗️导出是要选择JSON格式。导出后是一个.flr文件。

Flutter中的千变万化——Flare动画-鸿蒙开发者社区

注意左下角的两个Animations名字，一会儿会派上大用场🔮 。至此我们和美工的联系已经建立，美工的任务也已经完成，可以下班了😂 。

step 3: Coding 创造可能
以上我们已经得到了一个.flr文件，如何将它嵌入到我们的APP中，并且和我们的业务相结合呢？首先我们就要借助一个官方的Flare Plugin🎁

  flare_flutter: ^2.0.6

插件导入完毕后，我们还有两个小步骤：

将刚才得到的.flr文件放置在工程的assets目录下（没有该目录新建即可）

Flutter中的千变万化——Flare动画-鸿蒙开发者社区

在.ymal文件中声明引用资源

Flutter中的千变万化——Flare动画-鸿蒙开发者社区

接下来是本文的核心代码部分，代码不长🔧

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: FlareActor(
            "assets/Like.flr",
            alignment:Alignment.center,
            fit:BoxFit.contain,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
            isCheck = !isCheck;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

到这里，其实我们已经完成了官方Demo的全部步骤，但是你会惊奇的发现，你的动画～没有动...😅

Flutter中的千变万化——Flare动画-鸿蒙开发者社区

这是啥情况？弄啥嘞？别急，之前就已经埋下了伏笔🖌️，在FlareActor中还有一个参数animation：

  /// The name of the animation to play.
  final String animation;

这竟然是个String？这是个啥名字啊，咱也不敢乱传，经研究发现，真相只有一个！🤠 这个名字就是我们之前画板左下角不起眼的名字。

Flutter中的千变万化——Flare动画-鸿蒙开发者社区

传入对应的名字就可以正常播放动画了！我们为了动画的生动，再加上一个点击组件，再加一个状态控制参数，就圆满了🔎 。完整页面代码：

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
          onTap: (){
            setState(() {
              isLike = !isLike;
            });
          },
          child: FlareActor(
            "assets/Like.flr",
            alignment:Alignment.center,
            fit:BoxFit.contain,
            animation: isLike ? "Like" : "Unlike",
            callback: (name){
              debugPrint("动画名字：${name.toString()}");
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
            isLike = !isLike;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

其中还有一个回调函数，在动画结束时可以调用，可以满足你大部分业务需求。最终效果：

Flutter中的千变万化——Flare动画-鸿蒙开发者社区