今天学习下Flutter动画之 Flare.

Flare的官网.
Flare 可以为 App/游戏/网页等制作酷炫的矢量动画模型;Flare 动画的优势是有效减少文件体积且获取极好的动画效果,适用于与场景交互不大的场景.
在Flare官网上,可以访问两种文件,Nima文件和Flare文件:

  1. Nima 为较旧格式,仅支持光栅图;主要是为游戏引擎和应用构建 2D 动画 – XXX.nima
  2. Flare 为较新格式,支持矢量图与光栅图;主要为 App 和 Web 构建高效动画,也可用于游戏设计 – XXX.flr
    这两种格式文件使用各自的库. nima flare_flutter.

至于动画制作不用采用代码编写,而是采用类似PS的方式设计.我这里就不介绍如何设计动画,只介绍一下如何使用即可.设计方法可以参考网友的教程:
网友1.
网友2.
网友3.

引入库

1
2
3
4
5
6
7
8
nima: ^1.0.5
flare_flutter: ^1.5.4
和引入文件:
assets:
- assets/Hop.nima
- assets/Hop.png
- assets/Teddy.flr

one.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import 'package:flutter/material.dart';
import 'package:nima/nima_actor.dart';

class One extends StatefulWidget {
@override
_OneState createState() => _OneState();
}

class _OneState extends State<One> {
String _animationName = "idle";

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body: Stack(
children: <Widget>[
Positioned.fill(
child: NimaActor(
"assets/Hop.nima",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: _animationName,
mixSeconds: 0.5,
completed: (String animationName) {
setState(
() {
// Return to idle.
_animationName = "idle";
},
);
},
),
),
Positioned.fill(
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: const EdgeInsets.all(5.0),
child: FlatButton(
child: Text("Jump"),
textColor: Colors.white,
color: Colors.blue,
onPressed: () {
setState(
() {
_animationName = "jump";
},
);
},
),
),
Container(
margin: const EdgeInsets.all(5.0),
child: FlatButton(
child: Text("Attack"),
textColor: Colors.white,
color: Colors.blue,
onPressed: () {
setState(
() {
_animationName = "attack";
},
);
},
),
),
],
),
)
],
),
);
}
}

效果图:
nima初识

two.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import 'package:flutter/material.dart';
import 'package:flare_flutter/flare_actor.dart';

class Two extends StatefulWidget {
@override
_TwoState createState() => _TwoState();
}

class _TwoState extends State<Two> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: FlareActor(
"assets/Teddy.flr",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: "idle",
),
);
}
}

效果图:
flare初识

源码

开发中,你也可以选择其他的方案,如 lottie 或者 svgaplayer_flutter , 我大致试了下,在 Flare 和 lottie 和 svgaplayer_flutter来看,我觉得lottie更加简单。

lottie和svgaplayer_flutter的demo