Slide 1
Slide 1 text
ViewFlipperで
手軽にリッチアニメーション
Wataru Mizukami(水上 亘)
Slide 2
Slide 2 text
自己紹介
Wataru Mizukami/水上 亘
/ @tarumzu (たる)
Organization/ sikmi, inc.
Slide 3
Slide 3 text
ViewFlipperとは
- 子ViewやLayoutの表示を手軽に切り替えられるwidget
- 親クラスはViewAnimatorなので簡易的なアニメーションしか
出来ない
Slide 4
Slide 4 text
AdapterViewFlipperとは
- 親クラスはAdapterViewAnimator。ObjectAnimatorを利用
できるため、リッチなアニメーションを実装可能
- 子ViewやLayoutを切り替えるにはAdapterを作成する必要が
あるため、実装が大変
Slide 5
Slide 5 text
ViewFlipperで楽しながらリッチなアニ
メーションは出来ないのか？
Androidは険しい道程しかないの
か！？
Slide 6
Slide 6 text
実は出来ます
自分のような初心者だとWidgetでサ
ポートされていないアニメーションは使
えないと思いがち（ですよね？ ）
Slide 7
Slide 7 text
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()
}
Slide 8
Slide 8 text
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()
}
消えるときのアニメーション
Slide 9
Slide 9 text
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()
}
現れるときのアニメーション
Slide 10
Slide 10 text
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()
}
消えるアニメーションが終了したタイミン
グで現れるアニメーションを実行
Slide 11
Slide 11 text
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の裏面レイアウトの表示
を行う
Slide 12
Slide 12 text
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をタップしたら消えるアニ
メーションを実行する
Slide 13
Slide 13 text
実演はQiitaにて！
https://qiita.com/tarumzu/items/3d58f072e6b273caa496
Slide 14
Slide 14 text
まとめ
- 先入観に囚われない
- ViewFlipperのアニメーションは一切使わずにいいところだけ
を使い、ObjectAnimatorにすべてを任せる
Slide 15
Slide 15 text
ご清聴、ありがとうございました！