Flutter 2D向量動畫入門

Flare是一個線上的動畫設計網站，可以為APP、遊戲、網頁製作向量動畫模型，可直接嵌入Flutter(註一)的應用程式中，使用程式碼進行操作，同時在iOS和Andriod兩種不同的介面呈現動畫效果。

註一：Flutter是以 Google 主導的 Dart 程式語言來編寫，其開發目的在於整合原生行動平台以及性能，利於快速開發且跨平台覆蓋。Flutter 也廣泛運用在各式各樣的 Google 產品上，例如 Android 版與 iOS 版的《Google Ads》已改採 Flutter 框架。

新建動畫：

首先要到 www.2dimensions.com註冊帳號。註冊完成後於網頁右上角可以看到Your Files的選單去新增動畫。

你可以建立Flare或是Nima其中一種檔案，兩者都可以在Flutter使用，但兩種檔案有什麼不同呢？這邊簡單說明：

Flare：Insanely Fast Vector Animation，為APP、Web建立快速的動畫，同樣也可以用於遊戲設計。

Nima：Powerful Raster Graphics Animation，主要為遊戲引擎和應用建立2D動畫。

所以Flare偏向於APP和Web的應用；而Nima則偏向遊戲引擎使用。

一、介面介紹

接下來就以建立新的Flare為例子，新增檔案後，初始的空白工作區域如下圖：

左上有兩個Tab，分別是Design跟Animate。Design是用來繪製所需圖案及匯入向量元素使用、Animate則是控制向量元素的動作。基本上介面跟Sketch相似，在Design的下方，Hierarchy是指圖層樹狀圖顯示方式，選取後右邊的選單會出現Artboard的基本數值供user調整，例如尺寸、背景色、位置..等。

在Design的Tab下，會出現 “+”選單，你可以在這新增向量元素、鋼筆功能、形狀等等。按住滑鼠右键（或者按住空格拖动滑鼠）可以移動畫布，滾輪放大/缩小，上下左右鍵精確調整位置，Shift+上下左右鍵可以大幅調整位置。

二、設計區域( Design)

這邊我們用一個簡單的圓形作為範例。選取圖形後，右側会出現屬性選單，可以修改位置、大小、顏色、線條等等屬性。接著使用鋼筆工具製作線條，這邊我們選擇10px粗細度，並將線條的頭尾、轉角處調整為圓角，在Trim Path那邊請先選擇sequential(順序)或是

synced(同步)。這裡選擇其中一個都可以，重點是要讓線條可編輯。

每個圖形中心(註二)通常都會有個向上(藍綠色)、向右(紅色)的箭頭，這個小功能可以便利user快速上向、向右直線移動而不需要使用任何按鍵。另外還有方形的點，則負責控制上下的高度或左右的寬度。如想編輯線條/圖形，可點選右側選單的Edit Vertices / Convert to Path

編輯線條↑

圖形轉外框↑

註二：該控制功能在圖形狀態時，以圖形中心點為出發，線條則以起始點為主。

三、動畫製作(Animate)

基本的圓形跟勾勾設定好後，在左上的Tab切換到Animate。切換到Animate後在底下的面板會自動Untitled的影格層，點兩下可以重新命名，後續在Flutter代碼中會使用該動畫名稱，所以請務必命名明確。

Autokey可以維持選定狀態，右邊的三個按鈕分別為：顯示選中影格圖層、預覽循環播放、展示動畫區間。一開始的動畫都是10秒，但也可以拖移兩條藍線來調整動畫的時間長短。

選定動畫中要先變化的圖形，這邊先選擇圓形，接著在右側的工具欄中點選你要變化的大小或是位置。

這邊設定的動畫變化效果是大—>小—>大，讓圓形看起來很像顆球一樣由內往外彈。你也可以在右側選單點選完你要變化的大小或是位置後，再到圖形影格，點開你要變化的圖形，就會看到如下圖的變化數字調整

接著來設定check mark的動作，check mark的線條設定在半秒(0.35秒)，該線條會從無到有形成check mark。一樣在左側的點選該圖形圖層，再到右側勾選End Point(結束截點)，設定為0%。回到下方影格處大約抓取半秒的時間移動藍色的影格線，接著把End Point設定為100%。當你點選Play時，你就會看到剛剛所製作的圖形動態囉！

動畫完成效果如下網址：

Check Mark動畫

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");
  }
}