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. ご清聴、ありがとうございました！