Flutter Flare

Flutter 2D向量動畫入門

林緯綺 2019/12/11 14:13:43
120

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

 

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

新建動畫:

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

new file

 

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

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

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

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

 

 

一、介面介紹

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

work space

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

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

new layer

 

 

二、設計區域( Design)

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

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

synced

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

 

edit vertices
編輯線條↑

convert to path
圖形轉外框↑

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

 

 

三、動畫製作(Animate)

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

animate

 

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

Autokey

 

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

size

 

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

autokey size

 

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

testing

 

動畫完成效果如下網址:

 

Check Mark動畫

 

 

 

 

 

四、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");
  }
}
林緯綺