Flutter × Flareで無料で簡単にアニメーションを作る

この記事は前回、前々回の記事に続いて[Flutter Advent Calendar 2018](https://qiita.com/advent-calendar/2018/flutter)用に書いた記事です。15日分に空きが出ていたのでアニメーションツールFlareについて書くことにしました

前回までに書いた記事はこちら
1. [Google公式Flutter用Google Mapsプラグインを一通り使ってみた](https://qiita.com/aoinakanishi/items/25f2526fc7c1fe8350c6)
2. [Google公式Flutter用WebViewプラグインを一通り使ってみた](https://qiita.com/aoinakanishi/items/e58e7dd537ca1d1b76d6)

# Flareとは

最近のFlutterのニュースを見ている方なら既に皆さんご存知かと思いますが、Flareを使って簡単にアニメを追加することが出来ます。

![flare_macbook.png](https://qiita-image-store.s3.amazonaws.com/0/129712/f3cf1613-14f7-cf18-c7bd-5e87fd8e9ea8.png)

https://www.2dimensions.com/about-flare

> Insanely Fast Vector Animation for Apps, Games, and Web

と記載の通りアプリ、ゲーム、Web向けの爆速ベクターアニメーションです。

Webツールとして提供されていて、ブラウザさえあれば結構複雑なアニメーションが簡単に作れてしまうという便利なもので、FlareからエクスポートしたデータはそのままFlutterアプリに簡単に組み込むことが出来ます。

今回は

- サンプル素材の紹介
- サンプル素材をエクスポートしてFlutterに組み込む
- Flareを使って独自アニメーションを作ってみる

の３本立てで行きたいと思います。


# Explore

Flareで作った素材を公開できるプラットフォームです。Flutter Liveで使用されていたようなアニメーションの素材や他の利用者が提供している素材がたくさん並んでいて、良いものが見つかればそのままFlareで開くことが出来、編集を加えることも可能です。

https://www.2dimensions.com/explore/popular/trending/all

<img width="1364" alt="Screen Shot 2018-12-19 at 01.31.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/5cda6998-4b64-a8a5-303a-a40414b5b78f.png">


# Flareサンプル素材紹介

上記サイトにあるアニメーションからいくつかピックアップしてご紹介します。こちらのアニメーションのように様々な動きを表現することが可能です。

![ezgif-4-7204d086458c.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/bc911752-ace6-9b14-f365-7a966a1a0a09.gif)

![ezgif-4-fb1e023e18ae.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/b8f94b66-4876-d31b-824c-2617527d48ac.gif)

![ezgif-4-abd19aa84d86.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/9ff812c7-6946-78c4-35d9-3719ac00f227.gif)

![ezgif-4-031c9ca5a2f7.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/fdb201be-d6ba-3315-e114-5ba11ce670b4.gif)

![ezgif-4-ed7f211024de.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/977a7257-f94d-d8e2-0da3-4cf99a21cd13.gif)

# サンプル素材をエクスポートしてFlutterに組み込む

## Exploreから好みのアニメーションを選択

右上の「OPEN IN FLARE」をクリックするとこのアニメーションの素材をFlareで開き、編集することが可能です

<img width="1248" alt="Screen Shot 2018-12-19 at 02.41.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/380e150d-11fd-3f78-4dc4-e0bf498b5865.png">

## Flareで開いた状態

必要な修正後、右上のEXPORTボタンをクリックします

<img width="1247" alt="Screen Shot 2018-12-19 at 02.42.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/04b953af-66f2-c05b-5bd6-598393da50e3.png">

## 出力形式の選択

Flutterで使う上では値はデフォルトのままで変更の必要はありません

<img width="294" alt="Screen Shot 2018-12-19 at 02.42.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/e4f7e168-55e3-563f-a04f-0adb3d3e4d90.png">

## iOS上でFlareアニメーション
![ezgif-4-7444558eba01.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/b456f29c-bb9a-22ac-cfa4-77c97d07fee2.gif)

# 新しくFlareを作る

## 新規作成

「New Flare」を選択

<img width="199" alt="Screen Shot 2018-12-22 at 00.48.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/477dd872-cd2f-5003-fd3a-08b19c720345.png">

<img width="1229" alt="Screen Shot 2018-12-22 at 01.00.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/b64a8e44-6142-ad9d-01cb-ad48d143661b.png">

<img width="1245" alt="Screen Shot 2018-12-22 at 00.48.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/e89f74db-2a28-b859-8100-2b42515ba50e.png">

## 画像の準備

[Appleのロゴ](https://icon-icons.com/ja/%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3/apple-apple%E3%81%AE%E3%83%AD%E3%82%B4%E3%81%AF-%E7%A4%BE%E4%BC%9A%E7%9A%84%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF/65545) をダウンロードします（SVG）

## 画像をドロップ
<img width="1019" alt="Screen Shot 2018-12-22 at 00.50.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/0cb8301b-e3c3-da2c-89e3-18bf272cb5f2.png">

## ANIMATEタブを開く
<img width="207" alt="Screen Shot 2018-12-22 at 00.55.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/9d215db3-1f14-3c9c-647b-303fcd1f0ad8.png">

## 時間を設定
・アニメーションの時間
・各パーツの開始地点
・各パーツの終了地点
を設定してファイルをエクスポート

開始地点
<img width="905" alt="Screen Shot 2018-12-22 at 01.14.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/c7a2a66e-2cd7-3c1b-8430-f09a181f205b.png">

終了地点
<img width="909" alt="Screen Shot 2018-12-22 at 01.14.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/bbc05c21-0ff1-85e9-a257-7fcc70cd1444.png">

これをエクスポートしてファイルに出力してFlutter上で実行したのがこちら

![apple.gif](https://qiita-image-store.s3.amazonaws.com/0/129712/a156e03a-7a66-b855-d674-2027316bdbc2.gif)

アニメーションの途中は良い感じに線形補間してくれます。回転や拡縮などもいろいろ出来るのでFlareを使いこなすことでいろいろなアニメーションを実現することが出来ます。あまり詳しくはありませんが個人的な感覚としてはFlashでアニメーションを作るよりも簡単に作れる気がしました。

# 実行するためのコード

リソースを指定

```yaml
  assets:
    - images/gears.flr
    - images/apple.flr
```

Flutterから呼び出し

```dart
          child: FlareActor(
            "images/apple.flr",
            animation: "apple",
            fit: BoxFit.contain,
          )),
```

# 今回のソースコード

Flare
https://www.2dimensions.com/a/aoinakanishi/files/flare/apple

Flutter
https://github.com/aoinakanishi/flutter-flare-animation-example