如何使用Flare - Flutter? Part 2 - 和Flutter整合

本文翻译整理自How to Flare a Flutter app? Part 2 — Flutter Integration - Medium

flare-flutter.png

如果你没有阅读过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包

1. 打开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 {
  @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项目中的动画名称相同,请查看以下屏幕截图:

animation_name.png

build, run我们的工程并欣赏我们的动画

当你run app的时候, 你应该能看到如下图的动画效果.

animate.gif

恭喜! 我们已经完成了!

我们使用2dimensions.com中的Flare从头创建了一个新的简单动画, 我们将它导出到第1部分的一个文件中, 然后在第2部分中, 我们使用动画文件在Flutter上运行它.

这个项目的Github地址就在这里:
https://github.com/yidinghe/flutter_flare_demo

对于高级动画, 我建议学习一下Flare上的Bones, 它允许您为图形创建骨架. 这是为多个连接部分(如角色的手臂, 旗帜或树枝) 制作动画的自然方式.

希望这篇文章可以帮助到你, 谢谢观看~