注册登陆
然后进入2D - Animation Tools for Apps, Games, and Web
首先,注册好账号,如果有Google账号,可以直接使用。
登陆成功后则可以开始创建动画了:
点击“Your Files”
创建新的Flare文件后,需要选择文件的属性,如果是public则免费使用,同时你的作品也会被公开;如果是privete则需要一定费用。默认为public
绘制动画
之后则可以开始动画制作了,以一个简单的按钮为例:
选择矩形工具:
画完一个矩形后,点击左侧资源区的Artboard画板,在右侧调整其Size大小:
接着调整所绘制的矩形属性:
接下来,点击左侧资源区的ANIMATE进入动画设计模式,该模式下,无法增加或删除资源文件,点击矩形,在右侧记录矩形大小与矩形圆角在初始帧的属性:
然后调整中下方的区域,首先打开动画时长区间,然后将指针拨到00:01:00(mac可以使用快捷键command+shift+左右,windows可以使用快捷键ctrl+shift+左右,一次调整10帧)
在00:01:00处,更改矩形的属性:
点击播放键,效果如下:
目前,动画是线性运行的,我们圈中所有的时间节点,然后在右下角进行一个插值器的调节:
再看效果如下:
然后我们将这个动画左下角命名为tap,之后再创建另外一个动画,命名为loading,这两个动画是互不相干的:
将动画切换到loading,这时候绘制的界面会停留在上一个动画的最后一帧,所以可以事先把时间选择器放在第一帧上。在左边的资源区,切换到DESIGN模式,再创建三个小球用作加载:
选中三个小球按 command+g(windows是ctrl+g)可以将其分组,可以把这个组命名为loading_ball:
之后再切回ANIMATE,在loading动画的初
始帧,把矩形属性设置为tap动画最后一帧时的属性,同时记录下三个小球的高度属性,之后再做动画:
因为是loading,所以选择了循环动画,效果如下:
由于每次在资源区新增元素后,动画区也会显示这个新的资源,比如下面这样,可以通过opacity来隐藏无关元素:
之后还需创建两个动画,分别为success与fail,在此之前先准备好另外两个资源
check:
对勾创建完成后,像之前一样,隐藏掉,需要使用时再显示,然后创建用来表示错误的叉
cross:
然后创建动画,只以success为例,效果如下:
只需要注意,其中的对勾路径动画实现的要点在于图形以路径存在,而不是填充式存在
接着是错误时的动画效果:
然后再创建一个不动动画normal用于记录按钮的初始状态即可
动画项目地址如下:(需要访问外网)
/a/homeman/files/flare/animation_test/preview
导入flutter
首先,导出这个flare文件
之后在flutter项目中添加flare插件,同时在lib同级目录下创建flrs文件夹用于存放flr文件:
运行flutter packages get后,即可准备开始使用动画了。
代码交互
示例代码如下:
8287)]
之后在flutter项目中添加flare插件,同时在lib同级目录下创建flrs文件夹用于存放flr文件:
[外链图片转存中…(img-n3NFKEQo-1643372828287)]
运行flutter packages get后,即可准备开始使用动画了。
代码交互
示例代码如下:
[外链图片转存中…(img-tcTap23t-1643372828287)]
如果觉得《打开Flutter动画的另一种姿势——Flare android面试题选择题》对你有帮助,请点赞、收藏,并留下你的观点哦!