Flutter動畫之Flare的製做與使用

  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格式的資源文件啦：

2019.08更新：
根據最新的2dimensions編輯頁面，導出文件的時候會有export和downloadFile兩種選項，請必定要選擇export。前者導出的是.flr文件，然後者是.flr2d文件，.flr2d文件Flare暫時不支持。

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。

  參考文章：

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