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
Writing Fast Ruby
sferik
628
62k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Navigating Team Friction
lara
189
15k
The Invisible Side of Design
smashingmag
301
51k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A designer walks into a library…
pauljervisheath
207
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Context Engineering - Making Every Token Count
addyosmani
3
62
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 で非線形曲線に変換できる