Flutter中的千变万化——Flare动画
开篇
在我们的日常开发中,为了给我们的产品塑造更好的形象,产出更好的用户体验,动画🖼 是不可或缺的一环。一个好的动画可以让交互更加的简洁,让用户更好理解我们的意图。所以如何添加动画,添加怎样的动画一直都是俺们程序员的难题🔧 ,其实在我之前的有关绘制的博客、有关贝塞尔曲线的博客中已经有一些动画的苗头了,只是没有展开来说。
但是不知道各位有没有思考过这样的问题,我们接触的App中的那些炫酷的动画,难道仅仅是程序员的产出吗🤔 ?有没有那么一瞬间,你会怀疑,有一些他肯定不是用代码撸出来的😑 ?比如说~这种?
这你要是和我说您是纯代码描的路径 ➕ 系统自带动画控制,我是绝对绝对不相信的🤣 ,就算你能实现,也是极大的拖慢了开发进度,让我们开始怀疑添加动画的收益是否为正向收益📌。
那么大多数这些复杂的动画是如何更好的实现的呢?
要知道我们是一个Team,不是孤军奋战,我们忘了一个很重要的伙伴👬 —— 美工人员。今天我们要介绍的工具就能让我们很好的与美工人员进行合作,方便我们生成炫酷多样的动画——Flare!
正文开始
起源
其实为什么会找到Flare呢,主要是我之前在做iOS开发的时候使用过一个动画库,做过iOS开发的小伙伴可能比较熟悉是Airbnb的Lottie。其实Flare和Lottie我个人觉得还是很像的,都是旨在更好的将设计人员和开发人员的工作相结合🐳。
step 1: Rive 让你的应用栩栩如生
Rive这个网站就是我们的起源点,进入网站,注册账号,就会有一个个人的工作台 🚀
然后我们点击右上角新建一个项目就可以打开画板了🖼
打开是打开了,但~一脸懵逼🙃 ,有没有?但是别慌,以上步骤我是介绍给美工小伙伴的,到这一步接下来是美工的事情了,由美工去设计和绘制动画。
不会用这个画板或者网站类工具的美工伙伴建议Google一下教程很多。在我的印象里很多美工只会简单的切图、抄图,我认为这不是美工,或者不能算是一个合格的设计人员。如果一个美工想要出众、想要获得更多的认可,或者是职业生涯走的更好,和任何职业一样都应该保持学习。
亲测!之前和我合作过的美工人员上手这个画板非常快,所以各位也不用担心美工人员有很大的学习成本👀 。
step 2: Explore 发现美好
等美工伙伴制作好动画之后,就轮到我们干活儿了💪 。我们可以在网站左上角的Explore里找到一个动图先做一个示范。
我们选中右边栏的OPEN IN Rive按钮🔘 即可在画板中打开这个动画文件。
这边有两个注意点:
- 在右上角可以选择Export进行导出,切记❗️导出是要选择JSON格式。导出后是一个.flr文件。
- 注意左下角的两个Animations名字,一会儿会派上大用场🔮 。 至此我们和美工的联系已经建立,美工的任务也已经完成,可以下班了😂 。
step 3: Coding 创造可能
以上我们已经得到了一个.flr文件,如何将它嵌入到我们的APP中,并且和我们的业务相结合呢?首先我们就要借助一个官方的Flare Plugin🎁
flare_flutter: ^2.0.6
插件导入完毕后,我们还有两个小步骤:
- 将刚才得到的.flr文件放置在工程的assets目录下(没有该目录新建即可)
- 在.ymal文件中声明引用资源
接下来是本文的核心代码部分,代码不长🔧
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的全部步骤,但是你会惊奇的发现,你的动画~没有动...😅
这是啥情况?弄啥嘞?别急,之前就已经埋下了伏笔🖌️,在FlareActor中还有一个参数animation:
/// The name of the animation to play.
final String animation;
这竟然是个String?这是个啥名字啊,咱也不敢乱传,经研究发现,真相只有一个!🤠 这个名字就是我们之前画板左下角不起眼的名字。
传入对应的名字就可以正常播放动画了!我们为了动画的生动,再加上一个点击组件,再加一个状态控制参数,就圆满了🔎 。完整页面代码:
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中Skia的优势,非常炫酷🎊 。
尾声
Flare这一类的动画库可以非常好的优化用户体验🏄🏻♂️ ,也可以拉近设计人员和开发人员之间的距离,是一个非常好的解决方案,其实这个动画库是非常复杂的,包括内置controller的使用和拓展、动画的控制等,后续有时间深入研究再写成博客分享给各位!欢迎关注我的博客 🎨 ~
作者:多肉葡萄五分糖
来源:掘金