【Android】ObjectAnimatorで遊ぼう

※当記事は表示している画像にラグがあります。お許しください。

ObjectAnimatorを使うとこんなことができました。

<img width="280" alt="Transition.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700755/7a291595-a213-4f38-29a7-3308328fdcdd.gif">

 ~~某シューティングゲー？？~~

今回はObjectAnimatorの基本的なアニメーションをまとめます。

## ObjectAnimator

Viewをアニメートしてくれます。
アニメーション対象のViewをTargetと呼び、具体的にどうアニメーションするかを定義しているのがプロパティです。

代表的なプロパティは以下
- ROTATION：回転
- TRANSLATION：移動
- SCALE：拡大縮小
- ALPHA：透過

ほか、いわゆるセッターゲッターがある各属性（backGroudColorのような）なら、大体これでアニメーション化できるとのこと。

```kotlin.kt
ObjectAnimator.ofFloat(
targetView,
Property,  
float... values           
).start()
```

### ROTATION：回転
クリックリスナに以下処理を書きましょう。（→このViewは[こちらの記事で](https://qiita.com/KimKo/items/8e5297977e77790870c4)）

```kotlin.kt
val animator = ObjectAnimator.ofFloat(targetView, View.ROTATION, 0f, 360f) // 0°Start 360°End
animator.duration = 2000 // アニメーション期間 Defaultは300ms
animator.start()
```
※ラグってますが、手元のエミュレータではきれいに回ってます

<img width="280" alt="Rotation.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700755/368de41c-0dff-a04c-a1db-4f4eb5cafac5.gif">

### TRANSLATION：移動

```
val animator = ObjectAnimator.ofFloat(targetView, View.TRANSLATION_Y, 800f) // Y軸方向(マイナス)に800動かすanimator.repeatCount = 1 // アニメーションをリピート
animator.repeatMode = ObjectAnimator.REVERSE // リピート設定
animator.start()
```

開始位置は上にずらしてます。
<img width="280" alt="Transition.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700755/b48d6a77-043b-9b92-b6c5-06e515de11c2.gif">

### Scale : 拡大縮小

```kotlin.kt
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)
といった形で、ある種、いくつかのプロパティを合成するイメージですね。

<img width="280" alt="Scale.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700755/8ac3c864-034d-d104-88d6-0f7e720fbe31.gif">


### Alpha : 透過

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

<img width="280" alt="Alpha.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700755/ab7689a5-6ea6-6013-0857-9d2f7fea9ef2.gif">

### 他プロパティ
上でちょっと書いた、セッターゲッターがあるプロパティであれば、アニメーション化できます。

```
val animator = ObjectAnimator.ofArgb(targetView.parent,
"backgroundColor", Color.BLACK, Color.WHITE)
animator.setDuration(500)
animator.repeatCount = 1
animator.repeatMode = ObjectAnimator.REVERSE
animator.start()
```

<img width="280" alt="Alpha.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700755/4251af89-3367-87f8-6b59-8e002867d022.gif">


### 応用
この辺組み合わせると、冒頭の以下のようなアニメーションが作れます。次記事でざっくり解説予定。
<img width="280" alt="Transition.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700755/7a291595-a213-4f38-29a7-3308328fdcdd.gif">

## 終わり
ラグすみません。改善予定。。