今天學習如何做出動畫效果
主要使用 ValueAnimator 和 ObjectAnimator 來達成

• ValueAnimator，將重點放在
  透過值的變化來產生動畫，可以將值設定給 View 的 translationX, translationY, alpha 值... 等等；主要是在規範時間內得到不同的值，再看如何去操作這些值
• ObjectAnimator
  ObjectAnimator 繼承 ValueAnimator，將重點放在直接操作物件的某一個"屬性"上，藉此來達成動畫的效果

ValueAnimator

下方程式碼為使用範例：

• ofFloat 代表每一動畫的目標值
• duration 代表動畫時間，單位為毫秒，預設值為 300
• addUpdateListener 裡面就是每一次拿到 Value 要做的事情，animator 會把動畫時間做切割，所以這個 function 不會只進 3 個 float 的 3 次，而是一連串的數值；如範例為改變一連串的數值來移動 Y 軸
• 最後記得要使用 start() 來啟動動畫

val animator = ValueAnimator.ofFloat(0f, -350f, 0f)
animator.duration = 500
animator.addUpdateListener {
    valueBall.translationY = it.animatedValue as Float
}

valueBall.setOnClickListener {
    animator.start()
}

ObjectAnimator

ObjectAnimator 是對物件屬性的操作
所以我們依序傳入物件、屬性名稱、數值組...就可以達成動畫的效果
一樣要注意 start() 才會執行

val animator = ObjectAnimator.ofFloat(
    objectBall,
    "rotationY",
    0.0f, 360.0f)
animator.duration = 500

objectBall.setOnClickListener{
    animator.start()
}

AnimatorSet

AnimatorSet 可以用來把不同的 ObjectAnimator 包成一包執行，可以設定有先後順序或是同時執行等等
下方程式碼先製作了 2 個 animator，接著有個按鈕分別執行 "連續播放動畫" 和 "同時播放動畫"

• 連續播放動畫
  使用 .play() 後可以繼續加 .after() 來串接動畫
• 同時播放動畫
  使用 .playTogether() 將傳入的 animator 同時執行

val animator1 = ObjectAnimator.ofFloat(
    setBall01,
    "translationY",
    0f, -500f, 0f
)
val animator2 = ObjectAnimator.ofFloat(
    setBall02,
    "translationY",
    0f, 500f, 0f
)

val animatorSet_onebyone = AnimatorSet()
animatorSet_onebyone.duration = 500

oneByOne.setOnClickListener {

    if (!animatorSet_onebyone.isRunning) {
        animatorSet_onebyone.play(animator1).after(animator2)
        animatorSet_onebyone.start()
    }
}

val animatorSet_sameTime = AnimatorSet()
animatorSet_sameTime.duration = 500

sameTime.setOnClickListener {
    if (!animatorSet_sameTime.isStarted) {
        animatorSet_sameTime.playTogether(animator1, animator2)
        animatorSet_sameTime.start()
    }
}

Interpolator

這是 ObjectAnimator 的其中一個設定，表示說這個動畫的呈現該套用什麼演算法
基本上有以下幾種：

• LinearInterpolator
• AccelerateInterpolator
• DecelerateInterpolator
• AccelerateDecelerateInterpolator
• AnticipateInterpolator
• OvershootInterpolator
• AnticipateOvershootInterpolator
• BounceInterpolator
• CycleInterpolator

套用方式：指定給 animator.interpolator 即可，動畫即會有改變速度愈來愈快、愈來愈慢... 等等不同的效果

val animator = ObjectAnimator.ofFloat(interpolatorBall, "translationX", 0f, 500f, 0f)
animator.interpolator = LinearInterpolator()
animator.start()