iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
0

使用語言

  • 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 )

      一般寫法:

      // 監聽 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 可以參考官方文件說明

插值器有以下這些種類:

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

實作成果

查看詳細 Code > GitHub

tags: Android Kotlin Property Animation ValueAnimator ObjectAnimator AnimatorSet Interpolator

上一篇
Android Kotlin 實作 Day 13:LocalStorage(SharedPreferences)
下一篇
Android Koltin 實作 Day 15:Notification(Notification)
系列文
英國研究顯示,連續30天用Kotlin開發Android將有益於身心健康30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言