※当記事は表示している画像にラグがあります。お許しください。
ObjectAnimatorを使うとこんなことができました。

某シューティングゲー??
今回はObjectAnimatorの基本的なアニメーションをまとめます。
ObjectAnimator
Viewをアニメートしてくれます。
アニメーション対象のViewをTargetと呼び、具体的にどうアニメーションするかを定義しているのがプロパティです。
代表的なプロパティは以下
- ROTATION:回転
- TRANSLATION:移動
- SCALE:拡大縮小
- ALPHA:透過
ほか、いわゆるセッターゲッターがある各属性(backGroudColorのような)なら、大体これでアニメーション化できるとのこと。
ObjectAnimator.ofFloat(
targetView,
Property,
float... values
).start()
ROTATION:回転
クリックリスナに以下処理を書きましょう。(→このViewはこちらの記事で)
val animator = ObjectAnimator.ofFloat(targetView, View.ROTATION, 0f, 360f) // 0°Start 360°End
animator.duration = 2000 // アニメーション期間 Defaultは300ms
animator.start()
※ラグってますが、手元のエミュレータではきれいに回ってます

TRANSLATION:移動
val animator = ObjectAnimator.ofFloat(targetView, View.TRANSLATION_Y, 800f) // Y軸方向(マイナス)に800動かすanimator.repeatCount = 1 // アニメーションをリピート
animator.repeatMode = ObjectAnimator.REVERSE // リピート設定
animator.start()
Scale : 拡大縮小
val scaleX = PropertyValuesHolder.ofFloat(View.SCALE_X, 4f)
val scaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 4f)
val animator = ObjectAnimator.ofPropertyValuesHolder(targetView, scaleX, scaleY)
animator.repeatCount = 1
animator.repeatMode = ObjectAnimator.REVERSE
animator.start()
ScaleアニメーションはXとY双方に関してアニメーションプロパティを設定する必要があります。
複数のプロパティを設定する一つの方法として、PropertyValuesHolderがあります。
PropertyValuesHodler(X, value)
PropertyValuesHodler (Y, value)
ObjectAnimater.ofPropertyValuesHolder(view, holderx, holdery)
といった形で、ある種、いくつかのプロパティを合成するイメージですね。

Alpha : 透過
val animator = ObjectAnimator.ofFloat(targetView, View.ALPHA, 0f) // 0.0へ透過
animator.duration = 1000
animator.start()

他プロパティ
上でちょっと書いた、セッターゲッターがあるプロパティであれば、アニメーション化できます。
val animator = ObjectAnimator.ofArgb(targetView.parent,
"backgroundColor", Color.BLACK, Color.WHITE)
animator.setDuration(500)
animator.repeatCount = 1
animator.repeatMode = ObjectAnimator.REVERSE
animator.start()

応用
この辺組み合わせると、冒頭の以下のようなアニメーションが作れます。次記事でざっくり解説予定。
終わり
ラグすみません。改善予定。。