狐好きぷろぐらまー

狐好きプログラマーのブログです。

トップ > Dart > 【Flutter】Animationを触ってみた

【Flutter】Animationを触ってみた

Dart Flutter

こんにちは。 pregum_foxです。

雑談

今週は来週の日曜日に開催される技術書典を楽しみにしながら、生活しています。

技術書典7

いわゆる技術系の即売会ですが、マネジメント系から低レベルの技術(ベアメタル等)まで豊富にあって、新しい技術や面白い技術ないかなと思っている人にはうってつけなイベントだと思います。

興味のある方はぜひ足を運んでみてはいかがでしょうか。

本題

今回はFlutterのAnimationを触ってみました。
できたものはこんな感じです。

f:id:pregum_fox:20190919071442g:plain
Animationサンプル

これを作成するまでに躓いたこと等を書いていきます。

それでは、目次です。

動作環境

項目 バージョン
Dart 2.5.0
Flutter 1.9.1+hotfix.2 
PS C:\xxxxx\xxxx\Source\Repos\Flutter\animate_widget_using_a_physic_simulation> flutter doctor --version     
Flutter 1.9.1+hotfix.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 2d2a1ffec9 (12 days ago) • 2019-09-06 18:39:49 -0700
Engine • revision b863200c37
Tools • Dart 2.5.0

やりたかったこと

プチコンの以下のサイトにあるSYS/EX6SEQUENCERのプログラムを再現してみようとしてみました。
プログラムリスト SYS/EX6SEQUENCER – SmileBasic

完成はしていませんが、シーケンスが動く所はできました。

使用したソースは下のgistに配置しました。

animation_sample

300行ちょっとのソースコードですが、半分以上がWidget作成用のコードです。
順を追って説明します。

処理の流れ

  1. SingleTickerProviderStateMixinの実装
    AnimationControllerを使用する為に実装しています。
    今回はAnimationControllerは1つしか使用しないので、SingleTickerProviderStateMixinを実装しています。
    もし2つ以上AnimationControllerを使用する場合は、TickerProviderStateMixinを実装します。

  2. AnimationControllerのインスタンスを作成
    AnimationControllerをinitState()で作成します。
    Durationはスライダーの値によって変化させるのでフィールド_valueを指定しています。

  3. Animation<T>のインスタンスを作成
    Animation<T>のTが実際にWidgetに渡される型です。
    ここではAnimation<int>のインスタンスを作成しています。

  4. AnimatedBuilderを使用してAnimation対応Widgetを作成 Animationに対応する方法は様々な方法があるみたいですが、ここでは簡単なAnimatedBuilderを使用しています。

  5. FloatingActionButtonをtapしてアニメーション開始します。 何度も繰り返しアニメーションを行いたい為、repeat()を使用しています。

  6. アプリ終了時、disposeを行います。

詰まった所

Widgetの強調アニメーション時、他のWidgetが被って見た目が悪くなった

Table版その２ではTransform.scale()を使用して、Containerのscaleを大きく表示させた所、右側のWidgetに被ってしまい、見栄えが悪くなってしまいました。 原因としては、Widgetのz indexは記述順に上に追加されていく(最後のWidgetが手前に来る)為でです。
対処としては、Stack版で行っているように、強調するWidgetを最後に追加するようにすればscaleが大きくなっても他のWidgetが被らないようになります。(Tableは、追加した順に表示される為実質不可能)

Animationの値が小数でしか受け取れない

各Widgetのindexをアニメーションの値から取得する方法が、Tweenを使用した場合エラーが発生したので、公式のサイトを見ると、IntTweenやStepTweenがありこれらを使用することで、整数でAnimationの値を取得することができました。

試してみたいこと

Animationのaddlistener()やaddStatusListener()等は今回使用していないので、次回いいネタがあったら試してみたいです。

雑感

最初はとっつきにくかったですが、ある程度書き方がわかると、表現の幅が広がって良いと思いました。
ただ、Animationに凝り過ぎて実行速度が遅くなるという本末転倒な事態にならないようにしたいと思います。

ここまで読んで頂き、ありがとうございました。

参考サイト