三談屬性動畫——Keyframe以及ViewPropertyAnimator

xingfeng_coder發表於2019-03-11
動畫View

經過初識屬性動畫——使用Animator建立動畫和再談屬性動畫——介紹以及自定義Interpolator插值器，對屬性動畫已經介紹的差不多了，還剩下最後兩個概念，Keyframe和ViewPropertyAnimator。

Keyframe

動畫歸根結底是一些幀的組合，一旦設定了一個動畫後，中間的每幀，Android系統會幫我們計算好，而Keyframe允許我們定義動畫中的一些關鍵幀，該物件主要有fraction和value組成，其中fraction代表著動畫的進度、value代表著動畫的值，可以設定單獨的Interpolator，這個Interpolator作用於前一幀與當前幀。
舉個例子：

val kf1 = Keyframe.ofFloat(0.2f, 100f).apply {
            interpolator = AnticipateInterpolator()
        }
        val kf2 = Keyframe.ofFloat(0.4f, 200f).apply {
            interpolator = LinearInterpolator()
        }
        val kf3 = Keyframe.ofFloat(0.6f, 300f)
        val kf4 = Keyframe.ofFloat(0.8f, 400f).apply {
            interpolator = BounceInterpolator()
        }
        val kf5 = Keyframe.ofFloat(1.0f, 500f).apply {
            interpolator = SpringInterpolator(0.2f)
        }

        btnMove.setOnClickListener {
            ObjectAnimator.ofPropertyValuesHolder(tvShow,
                    PropertyValuesHolder.ofKeyframe(View.TRANSLATION_Y, kf1, kf2, kf3, kf4, kf5)).apply {
                duration = 3000
                start()
            }
        }
複製程式碼

上面程式碼定義了5個Keyframe，分別設定了不同的Interpolator，然後再用PropertyValuesHolder包裝一下，最終效果如下：

Keyframe效果

ViewPropertyAnimator

如果想在一個View上使用屬性動畫，可以這麼操作：

val animX = ObjectAnimator.ofFloat(myView, "x", 50f)
val animY = ObjectAnimator.ofFloat(myView, "y", 100f)
AnimatorSet().apply {
    playTogether(animX, animY)
    start()
}
複製程式碼

當然，也可以這麼操作：

val pvhX = PropertyValuesHolder.ofFloat("x", 50f)
val pvhY = PropertyValuesHolder.ofFloat("y", 100f)
ObjectAnimator.ofPropertyValuesHolder(myView, pvhX, pvhY).start()
複製程式碼

可以發現，都是挺麻煩的。View作為最常被動畫的物件，Android提供了一種封裝，這就是ViewPropertyAnimator，使用方式也是很簡單，比如上面的程式碼等效於：

myView.animate().x(50f).y(100f)
複製程式碼

View.animate()方法會返回一個ViewPropertyAnimator，該物件具備View的常用屬性的變換，比如：

  • transitionX、transitionY、transitionZ
  • rotation、rotationX和rotationY
  • scaleX、scaleY
  • x、y、z
  • alpha

總結

至此，學習完了屬性動畫的知識點，屬性動畫在Android Transition框架中很重要，是構成各種轉場動畫的關鍵，會實現各種酷炫的動畫是很厲害的，但其實都離不開這些基礎，剩下的更多是數學。

關於程式碼，參考Github

參考

  • https://developer.android.google.cn/guide/topics/graphics/prop-animation#keyframes
  • https://developer.android.google.cn/reference/android/animation/Keyframe
  • https://developer.android.google.cn/reference/android/view/ViewPropertyAnimator

關注我的技術公眾號，不定期會有技術文章推送，不敢說優質，但至少是我自己的學習心得。微信掃一掃下方二維碼即可關注：

二維碼

相關文章