Flutter アニメーションはじめの一歩

1. Flutter アニメーションはじめの一歩 Flutter Meetup Tokyo #2
2. About Me • Yusuke Hata • @kuwapp_dev • Androidエンジニア • メイド喫茶駆動開発
3. Agenda • Flutterのアニメーションの流れ • AnimationController について • Tween について • CurvedAnimation について • その他補足 • まとめ
4. • アニメーションの時間を決める • 時間内で値(数値とか色)がどう変化するか決める • 値が更新されれば Widget に反映する Flutterのアニメーションの流れ
5. AnimationController
6. • 指定された時間内で 0.0 から 1.0 までの数値を線形に順番に生成するクラス ◦ 例えば5秒なら、0.0からはじめて5秒後に1.0になるように数値が生成される • アニメーションの開始や停止等ができるメソッドを持つ • Widget のことは知らない AnimationController
7. AnimationControllerだけで アニメーションさせてみる
8. s サンプルコード 2秒間で0.0 から 1.0 までの値を生成する インスタンスを生成
9. s サンプルコード 新しい数値が生成されれば setState でUIを更新する
10. s サンプルコード アニメーションを開始する 数値の生成がはじまる
11. s サンプルコード AnimationControllerの現在 の数値を設定する 0.0 ~ 1.0
12. Flutter のロゴが アニメーションしてる！！
13. width height が最大1.0 なので見えない
14. それTweenで解決できるよ
15. Tween
16. Tween • AnimationController が生成する 0.0 ~ 1.0 の数値を異なった範囲やデータの 型に変換できるクラス
17. 例えば t 100.0 ~ 500.0 の範囲に変換する
18. 例えば t 型を Size にし、beginSize から endSize の範囲にする
19. サンプルコード 開始が 100.0 で最終的に 500.0 にな るようにする tween から取れる値を 設定する
21. CurvedAnimation
22. • AnimationController は線形に数値を生成するが、CurvedAnimationを使えば 非線形曲線にできる • 緩急をつけたアニメーションが簡単に実現可能 • デフォルトで10個以上のパターンが用意されている ◦ easeIn, easeOut, bounceIn CurvedAnimation
23. サンプルコード EaseIn を指定している
24. 他にも便利なクラスがある • AnimatedWidget • AnimatedBuilder
25. まとめ • AnimationController は 0.0 から 1.0 の値を順に生成する • Tween で AnimationController の値の範囲や型を変換できる • CurvedAnimation で非線形曲線に変換できる