開啟Flutter動畫的另一種姿勢——Flare

安卓小哥發表於2019-07-02

Flutter動畫

開頭

日常開發過程中我們時常能遇到動畫的需求，flutter中使用動畫的方式主要分為三種：

1.通過 AnimationController 及各種 Animation（如線性動畫TweenAnimation、非線性動畫CurveAnimation）與Widget的結合，來達到使元件動起來的效果。比如：

2.通過 Hero動畫 來做頁面之間的跳轉效果，比如：

3.通過 CustomPainter 結合 Canvas 來實現自定義的動畫。

其中，第三點可實現的內容最為豐富，同時也最為複雜。這裡要介紹的是第四種動畫實現方案： Flare繪製動畫

關於Flare

Flare簡介

Flare是一款 免費的 網頁版的動畫製作工具，通過Flare我們可以輕鬆建立 60fps 的向量動畫。

Flare地址(科學上網)

為什麼要使用Flare

通過程式碼建立動畫是一件很 romantic 的事情，同時也是很費神費心的事情。稍稍遇到一些不夠規則、非線性的動畫需求，你的頭髮又會止不住的往下掉。

而通過Flare去實現本該靠程式碼完成的動畫，可以極大的提高效率。

Flare的適用場景

Flare適合於那種互動性不強的動畫，即程式碼與動畫效果關係不大的動畫。

使用Flare建立向量動畫，不僅可以有效減少檔案體積，還能獲得超高的動畫效果。

使用Flare

使用Flare之前，首先準備好一架通往世界的樓梯。

註冊登陸

然後進入 2D - Animation Tools for Apps, Games, and Web

首先，註冊好賬號，如果有Google賬號，可以直接使用。

登陸成功後則可以開始建立動畫了：

點選 “Your Files”

建立新的Flare檔案後，需要選擇檔案的屬性，如果是 public 則免費使用，同時你的作品也會被公開；如果是 privete 則需要一定費用。預設為 public

繪製動畫

之後則可以開始動畫製作了，以一個簡單的按鈕為例：

選擇矩形工具：

畫完一個矩形後，點選左側資源區的 Artboard 畫板，在右側調整其Size大小：

接著調整所繪製的矩形屬性：

接下來，點選左側資源區的 ANIMATE 進入動畫設計模式，該模式下，無法增加或刪除資原始檔，點選矩形，在右側記錄 矩形大小與矩形圓角 在初始幀的屬性：

然後調整中下方的區域，首先開啟動畫時長區間，然後將指標撥到00:01:00（mac可以使用快捷鍵command+shift+左右，windows可以使用快捷鍵ctrl+shift+左右，一次調整10幀）

在00:01:00處，更改矩形的屬性：

點選播放鍵,效果如下：

目前，動畫是線性執行的，我們圈中所有的時間節點，然後在右下角進行一個插值器的調節：

再看效果如下：

然後我們將這個動畫左下角命名為 tap，之後再建立另外一個動畫，命名為 loading ，這兩個動畫是互不相干的：

將動畫切換到 loading ，這時候繪製的介面會停留在上一個動畫的最後一幀，所以可以事先把時間選擇器放在第一幀上。在左邊的資源區，切換到 DESIGN 模式，再建立三個小球用作載入：

選中三個小球按 command+g（windows是ctrl+g）可以將其分組，可以把這個組命名為 loading_ball:

之後再切回 ANIMATE ,在 loading 動畫的初始幀，把矩形屬性設定為 tap 動畫最後一幀時的屬性，同時記錄下三個小球的高度屬性，之後再做動畫：

因為是loading，所以選擇了迴圈動畫，效果如下：

由於每次在資源區新增元素後，動畫區也會顯示這個新的資源，比如下面這樣，可以通過 opacity 來隱藏無關元素：

之後還需建立兩個動畫，分別為 success 與 fail ，在此之前先準備好另外兩個資源

check：

對勾建立完成後，像之前一樣，隱藏掉，需要使用時再顯示，然後建立用來表示錯誤的叉

cross：

然後建立動畫，只以success為例,效果如下：

只需要注意，其中的對勾 路徑動畫 實現的要點在於圖形以路徑存在，而不是填充式存在

接著是錯誤時的動畫效果：

然後再建立一個不動動畫 normal 用於記錄按鈕的初始狀態即可

動畫專案地址如下：

www.2dimensions.com/a/homeman/f…

匯入flutter

首先，匯出這個flare檔案

之後在flutter專案中新增flare外掛,同時在 lib 同級目錄下建立 flrs 資料夾用於存放 flr檔案：

執行 flutter packages get 後，即可準備開始使用動畫了。

程式碼互動

示例程式碼如下：

String _currentAnimation = "normal";

GestureDetector(
          onTap: () {
            if (_currentAnimation == "normal") {
              setState(() {
                _currentAnimation = "tap";
              });
            }
          },
          child: FlareActor(
            "flrs/animation_test.flr",
            animation: _currentAnimation,
            fit: BoxFit.contain,
            callback: (animationName){
              switch(animationName){
                case "tap":
                  break;
                case "success":
                  break;
                case "fail":
                  break;
              }
            },
          ),
        )
複製程式碼

說明：

FlareActor：用於展示flr檔案的Widget
animation引數: 播放動畫的名字，也是標識
callback(animationName): 當前所播放的動畫結束後的回掉，動畫名則是引數animationName

下面以虛擬碼的形式來實現互動：

callback: (animationName){
              switch(animationName){
                case "tap":
                setState(() {
                        _currentAnimation = "loading";
                      });
                  doLogin((success){
                    setState(() {
                      _currentAnimation = "success";
                    });
                  }, (fail){
                    setState(() {
                      _currentAnimation = "fail";
                    });
                  }, (error){
                    setState(() {
                      _currentAnimation = "fail";
                      //處理其他錯誤邏輯
                    });
                  });
                  break;
                case "success":
                  doSuccess();//處理其他成功邏輯
                  setState(() {
                    _currentAnimation = "normal";
                  });
                  break;
                case "fail":
                  doFail();//處理其他失敗邏輯
                  setState(() {
                    _currentAnimation = "normal";
                  });
                  break;
              }
            },
複製程式碼