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

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

Bf8dccb5b8479c3a589004d3154b6f5f?s=128

Wataru Mizukami

March 08, 2019
Tweet

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