12月4日的Flutter Live中，Flare動畫宣佈了支援Flutter！但是這麼久過去了，並沒有相關的完的善中文教程出現，所以斗膽來寫一下。主要分成兩個部分來說說Flare：一是簡單講下怎麼在2dimensions上製作Flare動畫，二是怎麼在Flutter中使用Flare動畫。劃重點！！！：如果你是程式設計師，並且對設計沒興趣，那麼直接目錄跳到第二部分就OK了。
先說下什麼是Flare呢？其實就是一個線上的動畫設計網站，可以為App、遊戲和網頁製作向量動畫模型，網址是： www.2dimensions.com 。其實After Effects也有相關的實踐，像是我們熟知的Lottie和Bodymovin，一套設計，就可以在iOS和Android雙端實現複雜又好看的動畫效果。
Flare的製作
新建Flare動畫
首先開啟2dimensions網站：www.2dimensions.com，自行註冊賬號。註冊完畢後，將滑鼠移動到右上角的使用者頭像左邊Your Files選單，就可以看到製作動畫的入口啦：
我們可以新建一個Flare檔案，或是一個Nima檔案，兩者都可以在Flutter中使用。簡單說下區別：
- Flare：Insanely Fast Vector Animation，為App和Web構建實時、快速的動畫，同樣也可以用於遊戲設計。
- Nima：Powerful raster graphics animation tool，主要是為遊戲引擎和應用構建2D動畫。
工作皮膚介紹
簡而言之，Flare更偏向於App和Web使用，Nima更偏向於遊戲引擎使用。我們以建立Flare為例，初始的空白工作區長這個樣子：
左上角有兩個tab，分別是SETUP和ANIMATE：
- SETUP模式是用來繪製、匯入向量元素的；
- ANIMATE模式是用來將向量元素動起來的。
Hierarchy用樹狀圖的形式展示了所有控制元件的等級關係，一般頂級結點是一個artboard，可以定義scene的尺寸、背景顏色等屬性。你也可以有多個artboard，但是一個flare檔案至少需要包含一個artboard。所有型別的控制元件都可以擁有自己的子控制元件，子空間會繼承父控制元件的所有變換。
SETUP模式下會出現“+”號選單，用來新增向量元素，可以看到有預置的畫筆、形狀等等，我們先隨便新建一個形狀來作為講解例子，這裡我就匯入一個五角星吧：
按住滑鼠右鍵（或者按住空格拖動滑鼠）可以拖動畫布，滾輪放大/縮小，上下左右鍵精確調整位置，Shift+上下左右鍵可以大幅調整位置。選中我們的Star形狀，右側會出現屬性選單欄，可以修改位置、大小、顏色、線條等等屬性：
接下來我們切換到ANIMATE模式來新增動畫，底下會多出一行動畫控制皮膚：
會生成一個名為“Untitled”的預設動畫，雙擊可以改名，因為後邊在Flutter程式碼中可能會用到這個動畫名，所以儘量起個好名字，免得給自己找麻煩。
AUTOKEY按鈕預設選中就可以了，後邊三個藍色按鈕分別表示：是否展示選中項、預覽是否迴圈播放、是否展示動畫工作區間：
動畫預設是10秒鐘，拖動下圖的兩條藍線可以調整區間：
屬性動畫
（屬性動畫這個名字是我自己起的）屬性包括了縮放、旋轉、位移、透明度、顏色等等，只要右側屬性皮膚中帶小菱形標誌，我都歸納到了這一型別中。
接下來，我們試著給五角星新增一個放大的動畫：首先選中五角星，然後在下邊的時間軸上選擇一個動畫開始時間點（以2s為例），再點選右邊屬性皮膚scale屬性x、y右邊的透明小菱形（點選後變藍色），底下皮膚就會多處一個scale動畫了：
將藍色豎線拖動到動畫結束點（以4s為例）：
你會發現，原本藍色的小菱形右變成了空心的，此時點選小菱形，會變藍，同時生成一條從2s指向4s處的橫向藍線（你完全可以使用其他辦法生成，總之最後有這條指向性的藍色線就行）：
這條橫線就代表了一段同屬性動畫的動畫區間，你可以在這條線上加很多個點，選中每個點都可以修改當前時間點的動畫屬性值（加點的方法和前面一樣，移動豎著的藍色控制線，然後點選透明的小菱形變為藍色就行）。例如下邊這個透明度的變化值，你可以在任意時間點上新增藍色小菱形，然後設定當前透明度值：
我們回到4s處，雙擊藍色小菱形，將scale值修改為1.5，這樣，一個從2s——>
4s，scale從1.0——>
1.5的縮放動畫就完成啦：
右下角有一個差值器皮膚，Flare預置了三種差值器：Hold、Linear和Cubic：
用這種方法，我們可以為動畫加上各種各樣的屬性，縮放、旋轉、位移、透明度、顏色等等，只要右側屬性皮膚中有的屬性（就是右邊帶小菱形標誌的屬性）都可以新增。
Node和Solo控制元件
Node顧名思義就是結點，其實就是控制點，調整node的值可以控制某部分畫面的動畫，它擁有基礎的變換屬性（移動、旋轉和縮放），如果使用node作為容易，那麼可以為控制元件新增額外的變換（比如旋轉一張圖片、一組圖片、或者自定義旋轉中心）。接下來我們都以Google Live上的玩手機小人動畫為例來講解：
結點是一個像全屏一樣的四角圖示，上圖中的eye_close_right、eye_right、eye_close_let、eye_left等等都是結點，一個結點控制一個或多個控制元件的動畫，比如我現在選中的這個eye_right，它同時控制了兩個shape：右眼外邊的框和裡面的眼白，調整這個node，右眼外邊的框和裡面的眼白的屬性都會跟著一起變化：
Solo也是控制點，和node很像，也是用來控制一個或多個控制元件，比如上圖中瞳孔的屬性則是通過solo控制元件pupil_right來控制的，調整它的屬性，瞳孔就會相應變化。
它和node的區別就是下邊這張圖中表示的了，solo的每一個子控制元件前都有一個radio button，你可以隨時切換這個solo控制哪一個子控制元件（只會控制被選中的，其他的會被標記為de-activate）：
從上邊的圖中我們可以看到，Node和Solo都是有自己的座標軸的，座標軸的方向並不是隨機的，二是遵循了外部包含的bone的座標；如果沒有bone控制，那麼預設情況下是標準的直角座標系：
如果需要修改座標系的方向，可以在屬性皮膚中修改Rotation屬性，將座標軸進行旋轉：
Bone控制元件
Bone，顧名思義就是骨架，所以這個控制元件，一般畫小人的時候用，我們以小人的左腿為例來分析一下：
很明顯，這條腿上有三根骨頭，就是紅色數字標識的地方。有了bone，我們可以很直觀地為各個相關聯的部件做動畫（像人物的手臂啦、旗幟啦、樹枝啦）。
畫一組bone很簡單，點選菱形，然後多次單擊連成一組bone就可以了，右鍵單擊表示繪製結束：
如何將bone和path相關聯呢？我們首先選中path控制元件，右側選單欄選擇contected bones，然後在左側控制元件樹中選擇需要關聯的bone，就可以啦。
更多關於bone的操作請點選：Bone
我們還可以為bone新增約束，將右側的屬性選單欄拉到最底部，會有一個新增constraints屬性的選單，可以為bone新增target等：
關於Freeze屬性
我們最開始講了，一般來說，子控制元件會繼承父控制元件的變換，那麼有沒有辦法讓父控制元件的變換不影響子控制元件呢？這個時候我們可以使用Freeze控制元件將這些變換“凍住”。具體的可以看下這個例子：Freeze，操作很簡單，就是選中控制元件，然後修改它的freeze屬性就可以了。
flr檔案輸出
設計稿畫好之後，點選右上角的export按鈕，就可以匯出.flr格式的資原始檔啦：
Flare的使用
最基礎的，將flr檔案放到工程目錄，然後使用FlareActor控制元件來展示就可以了：
import 'package:flare_flutter/flare_actor.dart';
class MyHomePage extends StatefulWidget {
@override _MyHomePageState createState() =>
new _MyHomePageState();
}class _MyHomePageState extends State<
MyHomePage>
{
@override Widget build(BuildContext context) {
return new FlareActor("assets/Filip.flr", alignment:Alignment.center, fit:BoxFit.contain, animation:"idle");
}
}複製程式碼 但其實Flare很強大、很靈活的，flr檔案裡邊的每一個結點，都是可以獲取到的，方便我們精確地控制動畫。使用artboard.getNode(String name)可以得到一個ActorNode物件，使用play(String animationName)可以播放指定動畫。所以知道為什麼讓你們取名不要瞎取了吧，不然你寫出來的程式碼可讀性會很差。
如果你想要自己去控制動畫，那麼自定義一個controller繼承自FlareControls就可以了。注意，是FlareControls，不是FlareController，FlareControls繼承自FlareController，擁有一些基礎的play/mix方法，用起來簡單很多。你的自定義controller需要重寫三個方法：initialize()、advance()和 setViewTransform()。
initialize()一般是做初始化操作，此時FlareActor控制元件已經built好了，我們可以在此獲取node：
_faceControl = artboard.getNode("ctrl_face");
play("idle");
複製程式碼setViewTransform()在動畫的每一幀處都會被呼叫；advance()是在每一次artboard即將重新整理的時候被呼叫（還沒有開始draw的時候）
關於Nima
Nima的製作和使用其實和Flare大差不差的，所以就不重複寫了。
寫在最後
2dimensions explore 上有很多現成的動畫可供參考，大家可以去上邊看看，有很多有意思的idea。
參考文章：