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
RailsConf 2023
tenderlove
30
1.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Building an army of robots
kneath
306
46k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Cult of Friendly URLs
andyhume
79
6.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Fireside Chat
paigeccino
40
3.7k
Automating Front-end Workflow
addyosmani
1371
200k
Site-Speed That Sticks
csswizardry
11
880
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 で非線形曲線に変換できる