Flare 是一家可以快速製作 Flutter SVG 動畫的網站，提供專門的 Flutter Weight 承載網站匯出的動畫檔案，相當於 android 的 Lottie，Flare 的首次出現非常驚豔，是在 Flutter 釋出大會上，一下就火了。本來這篇文章沒必要寫的，簡書、掘金上很多介紹 Flare 的文章，但是出於學習的目的，這篇文章還得寫啊，目的是介紹 Flare 動畫在 Flutter 上的整合使用
瞭解 Flare
Flare 是一家網站：2dimensions，其上有非常多的全完開源的設計好的動畫，其中相當一部分是可以免費使用的
這裡每一個都是非常精美的 SVG 動畫，我們點開一個，這裡我就補錄屏了
點選右邊的open in flare 可以看到該動畫的設計原始碼
Flare 非常像 android 中處理 SVG 動畫，可以給指定 view 設定動畫，Animations 標籤下就是每段動畫的名稱了，這裡Demo是總的動畫，idle是播放之前的樣式，start是按鈕點選之後的loading 動畫，complete是動畫能播放完的樣子，我們通過每段動畫的名字就可以指定在 Flare Weight 上播放哪段動畫了。在 Flare 上設計動畫比 AE 簡單多了，甚至一些簡單的比例按鈕點選之類的動畫我們開發都可以自己實現了，不用去看 UI 的臭臉了，非常美哉~
下面這是這個動畫在 Flutter 上的樣子，我播放的是Demo這段，顯示整個互動過程，原本按鈕是白色的，非常不好看，所以我加了一個藍色對比
Flare 製作學習
Flare 學習相對簡單，但是這是對於設計來說的，我本人目前是木有時間啊，所以下面放2個簡單的學習教程，都是簡單的案例，給開發看的：
Flare 專案匯出
Flare 是以工程形式管理、建立動畫專案的，Flare 目前支援2種工程型別：
Flare- 為App和Web構建實時、快速的動畫Nima- 主要是為遊戲引擎和應用構建2D動畫
所以一般我們都是使用 Flare 型別的專案，但是 Nima 也不是不能用，其實本質都是一樣的，設計用哪個做的就用哪個就行了
-
Flare專案匯出，就是看右上角的匯出圖示能不能用，能用的就是允許匯出的，不亮的就是作者不給別人用，你只能看，有 export 和 downloadFile 兩種選項，請一定要選擇export，匯出的是.flr格式檔案
-
Nima專案匯出找右下角的設定圖示，點選選擇 export 方式匯出，選擇Generic引擎，匯出的檔案有2個：一個是png，一個.nma 檔案，手動把 .nma 改成 .nima，把這2個檔案都放到 asste 資原始檔中去
Nima 動畫使用
- 匯入 Flutter 外掛：
nima
name: flutter_app4
description: A new Flutter application.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
nima: ^1.0.5
複製程式碼-
放置動畫資源到 asset，下圖種的2個 Robot 檔案
-
使用
class EE extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 300,
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 3),
),
child: NimaActor(
"assets/animations/Robot.nima",
alignment: Alignment.center,
fit: BoxFit.contain,
animation: "Flight",
),
);
}
}
複製程式碼Flare 動畫使用
圖就是開始的哪個動圖，我就不再放了
- 匯入 Flutter 外掛：
flare_flutter
name: flutter_app4
description: A new Flutter application.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
flare_flutter: ^1.5.8
複製程式碼-
放置動畫資源到 asset，Flare 只有一個.flr 的檔案
-
使用
class FF extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 300,
height: 300,
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3),
),
child: FlareActor(
"assets/animations/Download.flr",
animation: "Demo",
alignment: Alignment.center,
fit: BoxFit.contain,
),
),
],
);
}
}
複製程式碼最後
Flare 感覺非常爽，GIF 看不出效能來，真機上是非常絲滑的，比 android 的 Lottie 強多了，不多 Flare 的 widget 必須要手動設定大小才行，要不會報錯