阅读 3365

打开Flutter动画的另一种姿势——Flare

开头

日常开发过程中我们时常能遇到 动画 的需求,flutter中使用动画的方式主要分为三种:

  • 1.通过 AnimationController 及各种 Animation(如线性动画TweenAnimation、非线性动画CurveAnimation)与Widget的结合,来达到使组件动起来的效果。比如:

image

  • 2.通过 Hero动画 来做页面之间的跳转效果,比如:

image

  • 3.通过 CustomPainter 结合 Canvas 来实现自定义的动画。

其中,第三点可实现的内容最为丰富,同时也最为复杂。这里要介绍的是第四种动画实现方案: Flare绘制动画

关于Flare

Flare简介

Flare是一款 免费的 网页版的动画制作工具,通过Flare我们可以轻松创建 60fps 的矢量动画。

Flare地址(科学上网)

为什么要使用Flare

通过代码创建动画是一件很 romantic 的事情,同时也是很费神费心的事情。稍稍遇到一些不够规则、非线性的动画需求,你的头发又会止不住的往下掉。

而通过Flare去实现本该靠代码完成的动画,可以极大的提高效率。

Flare的适用场景

Flare适合于那种交互性不强的动画,即代码与动画效果关系不大的动画。

使用Flare创建矢量动画,不仅可以有效减少文件体积,还能获得超高的动画效果。

使用Flare

使用Flare之前,首先准备好一架通往世界的楼梯。

注册登陆

然后进入 2D - Animation Tools for Apps, Games, and Web

首先,注册好账号,如果有Google账号,可以直接使用。

image

登陆成功后则可以开始创建动画了:

image

点击 “Your Files”

image

创建新的Flare文件后,需要选择文件的属性,如果是 public 则免费使用,同时你的作品也会被公开;如果是 privete 则需要一定费用。默认为 public

绘制动画

之后则可以开始动画制作了,以一个简单的按钮为例:

选择矩形工具:

image

画完一个矩形后,点击左侧资源区的 Artboard 画板,在右侧调整其Size大小:

image

接着调整所绘制的矩形属性:

image

接下来,点击左侧资源区的 ANIMATE 进入动画设计模式,该模式下,无法增加或删除资源文件,点击矩形,在右侧记录 矩形大小与矩形圆角 在初始帧的属性:

image

然后调整中下方的区域,首先打开动画时长区间,然后将指针拨到00:01:00(mac可以使用快捷键command+shift+左右,windows可以使用快捷键ctrl+shift+左右,一次调整10帧)

image

在00:01:00处,更改矩形的属性:

image

点击播放键,效果如下:

image

目前,动画是线性运行的,我们圈中所有的时间节点,然后在右下角进行一个插值器的调节:

image

再看效果如下:

image

然后我们将这个动画左下角命名为 tap,之后再创建另外一个动画,命名为 loading ,这两个动画是互不相干的:

image

将动画切换到 loading ,这时候绘制的界面会停留在上一个动画的最后一帧,所以可以事先把时间选择器放在第一帧上。在左边的资源区,切换到 DESIGN 模式,再创建三个小球用作加载:

image

选中三个小球按 command+g(windows是ctrl+g)可以将其分组,可以把这个组命名为 loading_ball:

image

之后再切回 ANIMATE ,在 loading 动画的初始帧,把矩形属性设置为 tap 动画最后一帧时的属性,同时记录下三个小球的高度属性,之后再做动画:

image

因为是loading,所以选择了循环动画,效果如下:

image

由于每次在资源区新增元素后,动画区也会显示这个新的资源,比如下面这样,可以通过 opacity 来隐藏无关元素:

image

之后还需创建两个动画,分别为 successfail ,在此之前先准备好另外两个资源

check

image

对勾创建完成后,像之前一样,隐藏掉,需要使用时再显示,然后创建用来表示错误的叉

cross

image

然后创建动画,只以success为例,效果如下:

image

只需要注意,其中的对勾 路径动画 实现的要点在于图形以路径存在,而不是填充式存在

image

接着是错误时的动画效果:

image

然后再创建一个不动动画 normal 用于记录按钮的初始状态即可

动画项目地址如下:

www.2dimensions.com/a/homeman/f…

导入flutter

首先,导出这个flare文件

image

之后在flutter项目中添加flare插件,同时在 lib 同级目录下创建 flrs 文件夹用于存放 flr文件

image

运行 flutter packages get 后,即可准备开始使用动画了。

代码交互

示例代码如下:

String _currentAnimation = "normal";

GestureDetector(
          onTap: () {
            if (_currentAnimation == "normal") {
              setState(() {
                _currentAnimation = "tap";
              });
            }
          },
          child: FlareActor(
            "flrs/animation_test.flr",
            animation: _currentAnimation,
            fit: BoxFit.contain,
            callback: (animationName){
              switch(animationName){
                case "tap":
                  break;
                case "success":
                  break;
                case "fail":
                  break;
              }
            },
          ),
        )
复制代码

说明:

  • FlareActor:用于展示flr文件的Widget
  • animation参数: 播放动画的名字,也是标识
  • callback(animationName): 当前所播放的动画结束后的回掉,动画名则是参数animationName

下面以伪代码的形式来实现交互:

callback: (animationName){
              switch(animationName){
                case "tap":
                setState(() {
                        _currentAnimation = "loading";
                      });
                  doLogin((success){
                    setState(() {
                      _currentAnimation = "success";
                    });
                  }, (fail){
                    setState(() {
                      _currentAnimation = "fail";
                    });
                  }, (error){
                    setState(() {
                      _currentAnimation = "fail";
                      //处理其他错误逻辑
                    });
                  });
                  break;
                case "success":
                  doSuccess();//处理其他成功逻辑
                  setState(() {
                    _currentAnimation = "normal";
                  });
                  break;
                case "fail":
                  doFail();//处理其他失败逻辑
                  setState(() {
                    _currentAnimation = "normal";
                  });
                  break;
              }
            },
复制代码

动画效果分别如下

success:

image

fail:

image

至此,使用Flare创建动画告一段落。

结尾

以上,都只是flutter魅力的冰山一角,使用flutter不仅可以极大提高开发效率,还能带来美好的开发体验。

希望未来的开发过程中,UI设计师可以使用Flare这项工具。最期待的结果是动画与代码分离,设计师想要什么样的动画可以自己去实现,而我们做展示即可。

给无法科学上网的同学准备的flr文件

附录

一、Flare官方教程

二、Flare快捷键

image

三、创建一个可互动的登陆页

Building an Interactive Login Screen with Flare & Flutter

image

四、Flutter动画进阶——创建可互动的一拳超人动画

image

地址:juejin.im/post/5d1dc6…

关注下面的标签,发现更多相似文章
评论