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动画-鸿蒙开发者社区

这样一个点赞动画就可以应用在所有的点赞👍 相关的业务场景了,动画流程不卡顿,充分发挥了Flutter中Skia的优势,非常炫酷🎊 。

 

尾声

 

Flare这一类的动画库可以非常好的优化用户体验🏄🏻‍♂️ ,也可以拉近设计人员和开发人员之间的距离,是一个非常好的解决方案,其实这个动画库是非常复杂的,包括内置controller的使用和拓展、动画的控制等,后续有时间深入研究再写成博客分享给各位!欢迎关注我的博客 🎨 ~

 

 

 

作者:多肉葡萄五分糖
来源:掘金

 

分类
收藏
回复
举报
回复
    相关推荐