本文翻译整理自How to Flare a Flutter app? Part 2 — Flutter Integration - Medium
如果你没有阅读过Part 1, 第一部分我们创建了borning_star动画.
你可以在Flare上预览我们创建的动画:
https://www.2dimensions.com/a/yidinghe/files/flare/the-boring-star/preview
在第一部分结束的时候, 我们将我们创建的动画导出为.flr文件.
在第二部分中, 我们将要实现:
- 创建一个新的Flutter项目.
- 导入Flare_Flutter包.
- 导入boring_start动画.
- build, run我们的工程并欣赏我们的动画.
创建一个新的Flutter项目
无论使用何种IDE, - Android Studio, IntelliJ或Visual Studio Code, 创建一个新的Flutter项目并将其命名为boring_star.
导入Flare_Flutter包
- 打开pubspec.yaml, 并导入Flare_Flutter包.
dependencies:
flutter:
sdk: flutter
flare_flutter: 1.0.11
在terminal中run flutter packages get, 或在IDE中点击"Packages get".
导入boring_start动画
创建一个文件夹并命名为animations. 将我们在Part1中创建的动画boring_star.flr放到animations文件夹中.
接下来, 在pubspec.yaml中导入我们的资源.
assets:
- animations/
最后, 用下面的代码替换掉main.dart中的代码.
import 'package:flutter/material.dart';
import "package:flare_flutter/flare_actor.dart";
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'The Boring Star',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new FlareActor("animations/boring_star.flr",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: "rotate_scale_color");
}
}
这里我们导入了Flare_Flutter包, 并创建了一个FlareActor widget以便我们可以传入我们动画的路径.
注意, rotate_scale_color这是动画名称, 它应该与我们在第1部分中设置的Flare项目中的动画名称相同,请查看以下屏幕截图:
build, run我们的工程并欣赏我们的动画
当你run app的时候, 你应该能看到如下图的动画效果.
恭喜! 🎉🎉🎉我们已经完成了!👌
我们使用2dimensions.com中的Flare从头创建了一个新的简单动画, 我们将它导出到第1部分的一个文件中, 然后在第2部分中, 我们使用动画文件在Flutter上运行它.
这个项目的Github地址就在这里:
https://github.com/yidinghe/flutter_flare_demo
对于高级动画, 我建议学习一下Flare上的Bones, 它允许您为图形创建骨架. 这是为多个连接部分(如角色的手臂, 旗帜或树枝) 制作动画的自然方式.
希望这篇文章可以帮助到你, 谢谢观看~
