More than 5 years have passed since last update.

FlutterAdvent Calendar 2018

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

Posted at 2018-12-21

この記事は前回、前々回の記事に続いてFlutter Advent Calendar 2018用に書いた記事です。15日分に空きが出ていたのでアニメーションツールFlareについて書くことにしました

前回までに書いた記事はこちら

Flareとは

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

Insanely Fast Vector Animation for Apps, Games, and Web

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

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

今回は

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

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

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

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

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

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

「New Flare」を選択

Appleのロゴをダウンロードします（SVG）

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

開始地点

終了地点

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

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

リソースを指定

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

Flutterから呼び出し

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