ViewFlipperで手軽にリッチアニメーション

Transcript

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