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