Flutter 动画插件 Flare_flutter

flutter中动画的实现比较简单

Rive rive.app/explore/pop…

Flare_flutter pub.dev/packages/fl…

制作简易动画

打开Rive后,首先进行注册登录,之后我们可以看到下图有许多开发者开发的动画,点击 New File创建新的动画

创建完成后我们会看到下图

DESIGN: UI设计
ANIMATE: 动画制作

使用ANIMATE制作动画

动画编辑完成后右上角点击导出

导出后将文件导入到项目中

项目配置

在项目新建assets/flr/star.flr通过新建目录并且重新命名文件为star.flr;

安装 flare_flutter 点击插件地址获取最新版本信息

打开 pubspec.yaml文件进行安装

安装完成后配置使用路径,在Flutter中静态资源需要在yaml文件中进行配置

  assets:
    - assets/
    - assets/flr/star.flr

项目使用

文件配置完成后就可以在页面中使用了

import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

class FlareFlutterDemo extends StatefulWidget {
  FlareFlutterDemo({Key key}) : super(key: key);

  @override
  _FlareFlutterDemoState createState() => _FlareFlutterDemoState();
}

class _FlareFlutterDemoState extends State<FlareFlutterDemo> {
  @override
  Widget build(BuildContext context) {
    return FlareActor(
      "assets/flr/star.flr",
      alignment: Alignment.center,
      fit: BoxFit.contain,
      animation: 'rotate'
    );
  }
}

这里首先要导入flare_actor.dart包, 使用FlareActor导入动画
第一个参数 当前动画的路径,就是在yaml文件中配置的路径
第四个参数 是动画的名称 这个名称是在制作动画是给动画命名的名称

编辑完成后就可以运行看到效果了