43
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

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

  1. Google公式Flutter用Google Mapsプラグインを一通り使ってみた
  2. Google公式Flutter用WebViewプラグインを一通り使ってみた

Flareとは

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

flare_macbook.png

Insanely Fast Vector Animation for Apps, Games, and Web

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

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

今回は

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

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

Explore

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

Screen Shot 2018-12-19 at 01.31.58.png

Flareサンプル素材紹介

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

ezgif-4-7204d086458c.gif

ezgif-4-fb1e023e18ae.gif

ezgif-4-abd19aa84d86.gif

ezgif-4-031c9ca5a2f7.gif

ezgif-4-ed7f211024de.gif

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

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

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

Screen Shot 2018-12-19 at 02.41.59.png

Flareで開いた状態

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

Screen Shot 2018-12-19 at 02.42.13.png

出力形式の選択

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

Screen Shot 2018-12-19 at 02.42.42.png

iOS上でFlareアニメーション

ezgif-4-7444558eba01.gif

新しくFlareを作る

新規作成

「New Flare」を選択

Screen Shot 2018-12-22 at 00.48.42.png Screen Shot 2018-12-22 at 01.00.06.png Screen Shot 2018-12-22 at 00.48.29.png

画像の準備

Appleのロゴ をダウンロードします(SVG)

画像をドロップ

Screen Shot 2018-12-22 at 00.50.30.png

ANIMATEタブを開く

Screen Shot 2018-12-22 at 00.55.23.png

時間を設定

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

開始地点
Screen Shot 2018-12-22 at 01.14.25.png

終了地点
Screen Shot 2018-12-22 at 01.14.35.png

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

apple.gif

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

実行するためのコード

リソースを指定

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

Flutterから呼び出し

          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

43
22
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
43
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?