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.3k
Flutter アニメーションはじめの一歩
kuwapp
May 31, 2018
Tweet
Share
More Decks by kuwapp
See All by kuwapp
FlutterPluginの作り方
kuwapp
8
4.1k
Flutter開発に役立つ Package Plugin 10選
kuwapp
6
16k
Flutterで画面遷移を検知する
kuwapp
4
8k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Six Lessons from altMBA
skipperchong
27
3.5k
KATA
mclloyd
29
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Docker and Python
trallard
40
3.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Adopting Sorbet at Scale
ufuk
73
9.1k
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 で非線形曲線に変換できる