在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玩玩.