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很強大、很靈活的，檔案裡邊但每一個結點，都是可以獲取到的，方便我們精確地控制動畫。使用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。

  參考文章：

• Building an Interactive Login Screen with Flare & Flutter
• How to Flare a Flutter app