Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutter アニメーションはじめの一歩
Search
kuwapp
May 31, 2018
1
1.4k
Flutter アニメーションはじめの一歩
kuwapp
May 31, 2018
Tweet
Share
More Decks by kuwapp
See All by kuwapp
FlutterPluginの作り方
kuwapp
7
4.3k
Flutter開発に役立つ Package Plugin 10選
kuwapp
5
16k
Flutterで画面遷移を検知する
kuwapp
4
8.4k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Code Reviewing Like a Champion
maltzj
525
40k
Facilitating Awesome Meetings
lara
55
6.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Docker and Python
trallard
46
3.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
It's Worth the Effort
3n
187
28k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Transcript
Flutter アニメーションはじめの一歩 Flutter Meetup Tokyo #2
About Me • Yusuke Hata • @kuwapp_dev • Androidエンジニア •
メイド喫茶駆動開発
Agenda • Flutterのアニメーションの流れ • AnimationController について • Tween について •
CurvedAnimation について • その他補足 • まとめ
• アニメーションの時間を決める • 時間内で値(数値とか色)がどう変化するか決める • 値が更新されれば Widget に反映する Flutterのアニメーションの流れ
AnimationController
• 指定された時間内で 0.0 から 1.0 までの数値を線形に順番に生成するクラス ◦ 例えば5秒なら、0.0からはじめて5秒後に1.0になるように数値が生成される • アニメーションの開始や停止等ができるメソッドを持つ
• Widget のことは知らない AnimationController
AnimationControllerだけで アニメーションさせてみる
s サンプルコード 2秒間で0.0 から 1.0 までの値を生成する インスタンスを生成
s サンプルコード 新しい数値が生成されれば setState でUIを更新する
s サンプルコード アニメーションを開始する 数値の生成がはじまる
s サンプルコード AnimationControllerの現在 の数値を設定する 0.0 ~ 1.0
Flutter のロゴが アニメーションしてる!!
width height が最大1.0 なので見えない
それTweenで解決できるよ
Tween
Tween • AnimationController が生成する 0.0 ~ 1.0 の数値を異なった範囲やデータの 型に変換できるクラス
例えば t 100.0 ~ 500.0 の範囲に変換する
例えば t 型を Size にし、beginSize から endSize の範囲にする
サンプルコード 開始が 100.0 で最終的に 500.0 にな るようにする tween から取れる値を 設定する
None
CurvedAnimation
• AnimationController は線形に数値を生成するが、CurvedAnimationを使えば 非線形曲線にできる • 緩急をつけたアニメーションが簡単に実現可能 • デフォルトで10個以上のパターンが用意されている ◦ easeIn,
easeOut, bounceIn CurvedAnimation
サンプルコード EaseIn を指定している
他にも便利なクラスがある • AnimatedWidget • AnimatedBuilder
まとめ • AnimationController は 0.0 から 1.0 の値を順に生成する • Tween
で AnimationController の値の範囲や型を変換できる • CurvedAnimation で非線形曲線に変換できる