在Flutter中使用Flare構建的動畫

在Flutter中使用Flare構建的動畫

Getting Started

在看Flutter Live的時候，Flare演示看起來很牛逼，並且挺好玩的（對於一個不會設計的程序猿），因此就擼了個demo玩玩。

介紹

在Flutter Live,2Dimensions宣佈即將推出Flare，這是一款非凡的新工具，可供設計師建立矢量動畫，可直接嵌入到Flutter應用程序中並使用代碼進行操做。

使用Flare構建的動畫能夠做爲窗口小部件嵌入到現有的Flutter應用程序中，容許它們參與完整的合成器並與其餘文本，圖形圖層甚至UI小部件重疊。以這種方式集成能夠將動畫從其餘體系結構的「黑盒子」限制中解放出來，並容許設計人員和開發人員之間的持續協做直到應用程序完成。Flutter和Flare之間的這種緊密集成爲想要創造高度完美的移動體驗的數字設計師和動畫師提供了獨特的引人注目的產品。

比較大的一個優點：Flare消除了在一個應用程序中設計，在另外一個應用程序中設置動畫，而後將全部這些轉換爲特定於設備的資產和代碼的須要。

在Flutter使用Flare構建的動畫

1. 導出Flare構建的動畫的文件

www.2dimensions.com/explore/pop…網站上面已經有不少現成的動畫實例，能夠直接拿來用就行。

點擊其中的一個動畫，而後頁面右上角的OPEN IN NIMA.

點擊Animate頁面，就能夠看到左下角，會顯示所擁有的動畫Animations

在Export to Engine菜單中，選擇Generic做爲引擎選項。將其餘設置保留爲默認值，而後按導出。這將生成並下載帶有Robot.nima文件和Robot.png文件的zip文件。

2. 在pubspec.yaml中添加Nima的依賴項

dependencies:
  flutter:
    sdk: flutter
  nima: ^1.0.0
複製代碼

3. 將下載的動畫文件添加到assets文件夾裏面，並在pubspec.yaml中聲明文件

assets:
    - assets/
    - assets/robot.nima
    - assets/robot.png
複製代碼

4. NimaActor的用法

class NimaActor extends LeafRenderObjectWidget{

	final String filename;//動畫文件的路徑
	final BoxFit fit;//設置填充的模式
	final Alignment alignment;//設置對齊方式
	final String animation;/*按我理解，就是一個動畫文件，可能會包含多個動畫狀態，每一個動畫狀態對應惟一的一個字符串。
	根據傳進去的Animation的名字，播放對應的動畫。就好比一我的形動畫，有跳的動畫，有走的動畫，
	根據所傳的animation的名字，播放對應的動畫
	*/
	final double mixSeconds;//從一個動畫切換到另外一個動畫之間的時間
	final bool paused;//是否暫停動畫
	final NimaAnimationCompleted completed;//動畫完成時提供的回調
	final NimaController controller;//控制器
}
複製代碼

5. 在Flutter中顯示Flare構建的動畫

首先是導入nima_actor.dart，這樣只後就可使用用來顯示動畫的NimaActor小部件

import 'package:nima/nima_actor.dart';

//省略部分代碼
@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new NimaActor("assets/robot", alignment: Alignment.center,
        fit: BoxFit.contain,
        animation: "Flight",
      ),
    );
  }

複製代碼

6. 總結

優點就是那樣咯，Flare消除了在一個應用程序中設計，在另外一個應用程序中設置動畫，而後將全部這些轉換爲特定於設備的資產和代碼的須要。

動畫設計果真仍是得設計師來搞，而後咱們之間導出來到Flutter中使用就能夠來。看起來挺好玩的，有空的時候你們能夠擼個動畫demo玩玩.

7.demo的Github地址：github.com/LXD31256949…