Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
ViewFlipperで手軽にリッチアニメーション
Wataru Mizukami
March 08, 2019
Technology
0
310
ViewFlipperで手軽にリッチアニメーション
Wataru Mizukami
March 08, 2019
Tweet
Share
More Decks by Wataru Mizukami
See All by Wataru Mizukami
tarumzu
1
220
tarumzu
1
420
tarumzu
2
420
tarumzu
2
490
tarumzu
2
590
Other Decks in Technology
See All in Technology
chaspy
3
1.1k
clustervr
0
170
yunon_phys
1
470
kraj
0
3.9k
stakaya
14
8.5k
_kensh
1
210
takaking22
2
530
sugimomoto
1
400
hgsgtk
5
1.3k
chaspy
1
470
jxck
2
250
sky_joker
0
140
Featured
See All Featured
phodgson
87
3.9k
notwaldorf
13
1.6k
sugarenia
233
840k
jensimmons
207
10k
schacon
145
6.6k
zakiwarfel
88
3.3k
pauljervisheath
195
15k
kastner
54
1.9k
iamctodd
17
1.9k
kneath
294
39k
trallard
13
650
dougneiner
55
5.4k
Transcript
ViewFlipperで 手軽にリッチアニメーション Wataru Mizukami(水上 亘)
自己紹介 Wataru Mizukami/水上 亘 / @tarumzu (たる) Organization/ sikmi,
inc.
ViewFlipperとは - 子ViewやLayoutの表示を手軽に切り替えられるwidget - 親クラスはViewAnimatorなので簡易的なアニメーションしか 出来ない
AdapterViewFlipperとは - 親クラスはAdapterViewAnimator。ObjectAnimatorを利用 できるため、リッチなアニメーションを実装可能 - 子ViewやLayoutを切り替えるにはAdapterを作成する必要が あるため、実装が大変
ViewFlipperで楽しながらリッチなアニ メーションは出来ないのか? Androidは険しい道程しかないの か!?
実は出来ます 自分のような初心者だとWidgetでサ ポートされていないアニメーションは使 えないと思いがち(ですよね? )
val outRotationY = ObjectAnimator.ofFloat(flipper, "rotationY", 0f, 90f) val inRotationY =
ObjectAnimator.ofFloat(flipper, "rotationY", 270f, 360f) outRotationY.addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator?) { inRotationY.start() flipper.showNext() } }) flipper.setOnClickListener { outRotationY.start() }
val outRotationY = ObjectAnimator.ofFloat(flipper, "rotationY", 0f, 90f) val inRotationY =
ObjectAnimator.ofFloat(flipper, "rotationY", 270f, 360f) outRotationY.addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator?) { inRotationY.start() flipper.showNext() } }) flipper.setOnClickListener { outRotationY.start() } 消えるときのアニメーション
val outRotationY = ObjectAnimator.ofFloat(flipper, "rotationY", 0f, 90f) val inRotationY =
ObjectAnimator.ofFloat(flipper, "rotationY", 270f, 360f) outRotationY.addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator?) { inRotationY.start() flipper.showNext() } }) flipper.setOnClickListener { outRotationY.start() } 現れるときのアニメーション
val outRotationY = ObjectAnimator.ofFloat(flipper, "rotationY", 0f, 90f) val inRotationY =
ObjectAnimator.ofFloat(flipper, "rotationY", 270f, 360f) outRotationY.addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator?) { inRotationY.start() flipper.showNext() } }) flipper.setOnClickListener { outRotationY.start() } 消えるアニメーションが終了したタイミン グで現れるアニメーションを実行
val outRotationY = ObjectAnimator.ofFloat(flipper, "rotationY", 0f, 90f) val inRotationY =
ObjectAnimator.ofFloat(flipper, "rotationY", 270f, 360f) outRotationY.addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator?) { inRotationY.start() flipper.showNext() } }) flipper.setOnClickListener { outRotationY.start() } ViewFlipperの裏面レイアウトの表示 を行う
val outRotationY = ObjectAnimator.ofFloat(flipper, "rotationY", 0f, 90f) val inRotationY =
ObjectAnimator.ofFloat(flipper, "rotationY", 270f, 360f) outRotationY.addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator?) { inRotationY.start() flipper.showNext() } }) flipper.setOnClickListener { outRotationY.start() } flipperをタップしたら消えるアニ メーションを実行する
実演はQiitaにて! https://qiita.com/tarumzu/items/3d58f072e6b273caa496
まとめ - 先入観に囚われない - ViewFlipperのアニメーションは一切使わずにいいところだけ を使い、ObjectAnimatorにすべてを任せる
ご清聴、ありがとうございました!