一 概述
- Flare是2Dimensions推出的一款专门用来为Flutter设计动画的工具。
- Flare与Flutter类似,后缀名为
.flr
,导出Flare动画文件可供开发者使用 - Flare已被Rive所取代,目前已停止更新,仅接收issues和bug反馈
二 Flare
2.1 仓库地址
Flare-Flutter:https://github.com/2d-inc/Flare-Flutter
2.2 插件地址
flare_flutter 3.0.0:https://pub.dev/packages/flare_flutter
2.3 插件安装与卸载
插件安装
-
打开CMD终端,执行如下指令(自动添加pubspec.yaml依赖)
flutter pub add flare_flutter
插件卸载
-
打开CMD终端,执行如下指令(pubspec.yaml依赖被删除)
flutter pub remove flare_flutter
三 Flare素材
3.1 素材资源
从右上角处,下拉列表选择Flare文件
3.2 素材下载
- Flare动画详情页,点击
OPEN IN RIVE1
- RIVE 1打开后,切换到
ANIMATE(animate)
选项卡,下面有相应的动画表情,点击可执行并查看(fail,test,success,idle)
- 点击右上角导出按钮将文件导出
四 示例
4.1 添加Flare依赖(assets下所有文件)
assets:
- images/
- assets/
4.2 代码(通过设置不同名称,显示动画效果)
//要执行的Flare名称(fail,test,success,idle选择一个)
String _animationName = "fail";
body: Column(
children: [
Flexible(child: FlareActor("assets/Teddy.flr", alignment:Alignment.center, fit:BoxFit.contain, animation: _animationName,)),
Row(
mainAxisAlignment:MainAxisAlignment.center,
children: [
RaisedButton(child: Text("test"),onPressed: (){setState(() {_animationName="test";});}),
RaisedButton(child: Text("success"),onPressed: (){setState(() {_animationName="success";});})
],)
],
)