flare_flutter动画动效

导入Flare_Flutter包

打开pubspec.yaml, 并导入Flare_Flutter包.

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  flare_flutter: ^1.5.0

在terminal中run flutter packages get, 或在IDE中点击"Packages get".
导入boring_start动画

创建一个文件夹并命名为animations. 将我们在Part1中创建的动画boring_star.flr放到animations文件夹中.

boring_star.flr文件制作介绍地址

接下来, 在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");
  }
}

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

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