使用語言

• Kotlin

使用元件

• EditText
• TextView
• Button

Animation 簡介

Android 提供了三種動畫類型：

• View Animation：較為簡單，能應用於各種 View，只能做平移、縮放、旋轉、透明度等簡單的變化。

  關於 View Animation 可參考 參考資料

• Drawable Animation：又被稱為 Frame Animation、幀動畫，像傳統動畫一樣，透過播放一張張圖片產生的動畫效果。

  關於 Drawable Animation 可參考 參考資料

• Property Animation：可應用於各種 Object，透過變更屬性來產生動畫。

  這次實作使用的方法即為 Property Animation。

關於三種動畫類型的詳細內容可參考 參考資料

另外，Android 的動畫可透過設置 Interpolator 修飾動畫效果。

Method

Property Animation

透過變更 Object 的屬性形成動畫

Property Animation 有三種動畫類別可以使用

• ValueAnimator

  設置一段時間內值的變化
  可透過監聽器將值賦予給某物件的某屬性，達到動畫效果。

  • ofFloat

    設置值要變化的內容

    ofFloat (vararg values: Float): ValueAnimator

    • values：指定過程中要變化為哪些值，可有多個值。

    • 回傳為一個 ValueAnimator 實例

    val animator: ValueAnimator = ValueAnimator.ofFloat(0.0f, -500.0f, 0.0f)
    

  • setDuration

    設置值變化的時程總長

    setDuration (duration: Long)

    • duration：值變化的總時程長度，單位為毫秒。

    // Kotlin 寫法
    animator.duration = 600
    

  • setInterpolator

    為動畫設置 Interpolator 來修飾動畫效果

    setInterpolator (value: TimeInterpolator)

    • value：要使用的 Interpolator。

      關於 Interpolator 會在後面說明。

  • addUpdateListener
    　
    設置監聽 ValueAnimator 變化的監聽器

    addUpdateListener (listener:　ValueAnimator.AnimatorUpdateListener )

    • listener：監聽器，用來監聽 ValueAnimator 變化並執行要執行的事情。

    • ValueAnimator.AnimatorUpdateListener 為一個 Interface，有一個 onAnimationUpdate 方法需要實作

      onAnimationUpdate(animation: ValueAnimator)

      • animation：設置此監聽器的 ValueAnimator

    一般寫法：

    // 監聽 ValueAnimator 的變化
    // 並在變化時將當下的值設定給 value_img 這個 View 的 translationY 屬性
    animator.addUpdateListener ( object: ValueAnimator.AnimatorUpdateListener {
        override fun onAnimationUpdate(animation: ValueAnimator){
            value_img.translationY = it.animatedValue as Float        
        }
    })
    

    Lambda 寫法：

    animator.addUpdateListener {
        value_img.translationY = it.animatedValue as Float
    }
    

  • start

    開始執行動畫

    start ()

    animator.start()
    

• ObjectAnimator

  繼承 ValueAnimator 的子類別，為封裝好更方便使用的類別。

  可以直接指定要設置動畫的對象、屬性，及變化的值。

  • ofFloat

    設置動畫的對象、要變更的屬性、要變化的值

    ofFloat (target: Object, propertyName: String, vararg values: Float): ObjectAnimator

    • target：要設置動畫的物件。

    • propertyName：要變更的屬性名稱

    • values：指定過程中要變化為哪些值，可有多個值。

    • 回傳為一個 ObjectAnimator 實例

    val objAnim: ObjectAnimator = ObjectAnimator.ofFloat(object_img2, "rotationY", 0.0f, 360.0f)
    

  • setDuration

    設置值變化的時程總長

    setDuration (duration: Long)

    • duration：動畫的總時程長度，單位為毫秒。

    // Kotlin 寫法
    objAnim.duration = 600
    

  • start

    開始執行動畫

    start ()

    objAnim.start()
    

• AnimatorSet

  用來組合動畫，讓動畫同時或依序播放。

  • playTogether

    同時播放多個動畫

    • playTogether (vararg items: Animator)

      • items：要播放的動畫，可有多個。

      val animup = ObjectAnimator.ofFloat(set_img_down, "translationY", 0.0f, -1000f, 0.0f)
      val animdown = ObjectAnimator.ofFloat(set__img_up, "translationY", 0.0f, 1000f, 0.0f)
      val aniSet = AnimatorSet()
      aniSet.playTogether(animup, animdown)
      

    • playTogether (items: Collection<Animator>)

      • items：要播放的動畫的集合。

  • setDuration

    設定 AnimatorSet 中每個動畫的時程長度。

    若沒設定則會時程會為各個動畫各別設定的時程長度。

    setDuration (duration: Long)

    • duration：動畫的總時程長度，單位為毫秒。

    // Kotlin 寫法
    aniSet.duration = 600
    

  • setInterpolator

    為動畫設置 Interpolator 來修飾動畫效果

    setInterpolator (value: TimeInterpolator)

    • value：要使用的 Interpolator。

      關於 Interpolator 會在後面說明。

  • start

    開始執行動畫

    start ()

    aniSet.start()
    

Interpolator

插值器，用來修飾動畫顯示的效果，會影響動畫變化過程中的速度或行為。

關於插值的意思可參考 Wiki

所有種類的插值器都是繼承 BaseInterpolator 的類別，
BaseInterpolator 是 implements Interpolator 的抽象類別，
Interpolator 為 implements TimeInterpolator 的 Interface，
TimeInterpolator 為一個 Interface。

關於以上類別及 Interface 可以參考官方文件說明

插值器有以下這些種類：

• AccelerateDecelerateInterpolator

  動畫速度在起始和結束較緩慢，過程中會加速。

• AccelerateInterpolator

  動畫速度在起始叫緩慢，接著加速。

• AnticipateInterpolator

  動畫會先向後然後再向前拋出。

• AnticipateOvershootInterpolator

  動畫會先向後然後再向前拋出至超過目標位置再回來。

• BounceInterpolator

  動畫在結尾時會有回彈效果。

• CycleInterpolator

  動畫會依設定的次數反覆執行。

• DecelerateInterpolator

  動畫速率會在起始時加速然後慢慢減速。

• LinearInterpolator

  動畫的速率為固定值。

• OvershootInterpolator

  動畫會向前拋出至超過目標位置後再回來。

• PathInterpolator

  基於貝賽爾曲線和 Path 的插值器。

更多關於插值器可以參考：參考資料1、參考資料2

實作成果

查看詳細 Code > GitHub

tags: Android Kotlin Property Animation ValueAnimator ObjectAnimator AnimatorSet Interpolator