少停 > Flutter~Flare动画学习

Flutter~Flare动画学习

2019-09-07

移动端学习

今天学习下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