本文翻译整理自How to Flare a Flutter App? Part 1 - Create Animation - Medium
Flutter Live 在12月4号Flutter Live大会上, Google宣布了一系列关于Flutter的更新, 最重要的更新是Flutter 1.0 release.
但我最爱的公布是Flare.
究竟什么是Flare?
Flare是一个网上的工具, 我们可以用来设计和动画矢量图形, 用于Apps, Games和Web.
Flare Created by 2dimensions.com
在手机上大量的动画化是非常不容易的, 如果你知道Lottie 和 After Effects插件Bodymovin, 通过使用它们, 我们可以获得丰富和漂亮的动画. 但是在我看来, 最好使用一家公司支持的完整解决方案, 而不是使用像After Effects这样的工具来创建动画, 然后使用第三方插件导出它, 然后在Android上运行Android库, 在iOS上运行另一个.
因此我想尝试一下使用Flare来创建简单的动画, 并且导出整合到Flutter App中.
在第1部分中，我将使用Flare创建一个新动画并将其导出到.flr文件。
在第2部分中，我将集成Flare库并使用导出的.flr文件在Android或iOS上运行动画。
自从Flutter团队推出The Boring Flutter Development Show之后，我决定制作一个无聊的动画：D
在这里预览Flare动画文件:
https://www.2dimensions.com/a/yidinghe/files/flare/the-boring-star/preview
在Flare上创建此动画只需3个步骤.
- 在Flare上绘制一个简单的形状
- 在Flare上设置缩放, 旋转和彩色动画
- 将动画导出为.flr文件
要打开Flare, 请访问https://www.2dimensions.com/about-flare并注册, 如果您还没有帐户的话.
单击Your files选项卡, 然后单击New Flare.
如下图一样的一个空白的的画图板会被创建出来.
在Flare中有两种模式:
1-SETUP模式, 用于绘制, 准备或/和导入矢量图形元素.
2-ANIMATE模式, 用于设置矢量图形元素的动画.
我们可以在左侧面板顶部的两种模式之间切换.
在“设置”模式下, 单击“添加”图标⊕添加新形状, 然后选择“Star”.
在中心画一颗星并从右侧面板改变填充颜色, 我使用了这种颜色#3F51B5
现在Star已经准备好了, 让我们来创建一个无聊的动画:D
我怎么做那个无聊的动画呢?
该动画是三种动画, 缩放, 旋转和着色的组合, 请参见下表.
在表格中, 可以看到我们从0秒的某些值缩放, 旋转和着色到1秒的其他值, 然后在2秒内返回原始值.
切换到ANIMATE模式以查看底部中心的动画时间轴以及ANIMATIONS面板左下角的动画设置.
默认情况下, 在ANIMATIONS面板中, 只为我们创建一个动画对象并命名为Untitled, 双击它并重命名为rotate_scale_color, 请查看下面的屏幕截图.
注意: 稍后我们将在Flutter代码中使用动画名称来调用此动画, 因此, 如果将来设置了较长的动画. 最好给它一个有意义的名称.
在时间轴的左侧, 有一个小窗口有一些按钮, 如播放, 从头开始, 循环, 工作区, 单击工作区按钮, 在时间轴上显示两条小蓝线, 起始线和动画的结束行, 请查看下面的截图.
默认情况下, 0秒的起始行和10秒的结束行, 我们将制作2秒动画, 因此在时间线上将结束行从10秒拖动到2秒, 请查看下面的屏幕截图.
正如你在上面的动画表中注意到的那样, 我们有三种类型的动画(比例, 旋转, 颜色), 所以我们需要在时间轴上为每一个设置一个关键的key, 因为我们也有三个阶段(0 , 1秒, 2秒).
所以我们需要设置的总key数为9, 实际应该是12个, 因为我们有Scale X和Scale Y, 如果你感到困惑不要担心.我们会分三个阶段一步一步的来实现动画, 这非常容易.
First Stage
确保选择0秒的时间轴和AUTOKEY按钮, 如下面的屏幕截图所示.
单击要选择的星形, 然后在右侧面板中转到缩放X和缩放Y并确保两者的值均为1, 然后单击每个旁边的小方块◇图标以向时间轴添加新键.
转到Rotation字段并确保值为0, 然后单击旁边的小方块◇图标(它应该是蓝色)
转到填充颜色并设置#3F51B5, 然后单击旁边的小方块◇图标.
恭喜! 🎉您已设置第一阶段所需的所有键(0秒)
请注意屏幕截图中时间轴中的键.
让我们重复刚才的步骤来实现第二步和第三步.
Second Stage
单击时间轴的顶部条带并将长蓝线拖动到1秒, 查看下面的屏幕截图.
在右侧面板中:
将刻度X和刻度Y设置为1.5, 将旋转设置为360, 设置填充颜色#FF5722, 并且不要忘记单击每个字段旁边的小方块◇图标, 单击后应该为蓝色.
Third Stage
单击时间轴的顶部条带并将长蓝线拖动到2秒, 查看下面的屏幕截图.
在右侧面板中:
将刻度X和刻度Y设置回1, 将旋转设置回0, 设置填充颜色#3F51B5, 并且不要忘记单击每个字段旁边的小方块◇图标, 单击后它应该是蓝色.
播放动画
单击播放图标以播放动画并通过单击LOOP图标使其重复, LOOP图标位于WORK AREA图标旁边.
导出
单击右上角的导出图标, 然后从菜单中选择"导出", 然后单击弹出窗口中的"导出"按钮.
将.flr文件保存在磁盘上并保留, 我们将在Part2中使用它.
从这里预览动画:
https://www.2dimensions.com/a/yidinghe/files/flare/the-boring-star/preview
在第2部分见!
