Heroでの画像アニメーション -ひとりアドベントカレンダー Flutter編 2018 その10-

画面遷移で拡大表示は出来ましたが、ただ遷移させただけではMaterialDesign特有の華やかさというか遊び心がすこし足りない感じです。
ということで、10日目は画面遷移の際にアニメーションを加えてみます。

昨日までの内容と今後については目次を参照してください。

アニメーションを加えるというと、絵心もセンスもない人はそれだけで難しそうと敬遠してしまいがちです。
ですが、Flutterはアニメーションも簡単にできる仕組みが整っているうえ、画面遷移時であれば自動的にアニメーションさせる方法が用意されています。

では、早速使ってみましょう。

今回もGitHubのプロジェクトにChapter10ブランチとしてアップしています。

と言っても、遷移先のIconをどちらもHeroでラップするだけです。

child: Card(
  child: Hero(
    tag: icon.key,
    child: Icon(icon.iconData, size: columnWidth * 0.8),
  ),
),

tagに一意になる任意のキーを与えると、同じキー同士で自動的に動きがついてアニメーションされます。
今回の場合だと、中央のアイコンが中央で大きくなるようなときにちょっと？？という動きになってしまいますが、まあこんなもんでしょう。絵心もセンスもない人は潔く諦めましょう。

動き的には、元のアイコンが一旦消えて、遷移先の画面とは別にアイコンがやってくる感じですね。

ということで、今回はこれで終わりです。簡単にアニメーションできるHeroを利用しました。
なお、Flutterには他にも簡単にアニメーションさせる方法がたくさん用意されていますので、また別の機会にでも紹介したいと考えています。

・・・

noteのいいねとかTwitterのフォローとかお待ちしています。