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
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
A designer walks into a library…
pauljervisheath
209
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Designing for humans not robots
tammielis
254
26k
YesSQL, Process and Tooling at Scale
rocio
173
15k
What's in a price? How to price your products and services
michaelherold
246
12k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
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 で非線形曲線に変換できる