by
通過實現各種動畫效果來學習 Android 動畫開發。
- ValueAnimator – 實現動畫
- ObjectAnimator – 實作動畫
- AnimatorSet – 實現組合動畫
Animator
Android 提供了幾種動畫類型：
- View Animation
- Drawable Animation
- Property Animation
這一次主要研究的是 Property Animation
ValueAnimator
通過 ValueAnimator 做動畫的過程，其實不是直接對控件做動畫，而是將對數字做動畫的過程監聽，
將變動的數值拿來修改控件的 property 從而實現動畫的過程。
1、實例化 ValueAnimator，設定一個數值間的動畫。
我們建立一個時間為 2 秒，從 0 到 -200 的動畫，還沒有與任何控件關聯。
|
1 2 3 |
val animator = ValueAnimator.ofFloat(0f, -200f) animator.setDuration(2000) animator.start() |
2、針對 ValueAnimator 加入監聽，將變化的數值拿來對控件做操控。
通過對 animator 的監聽，我們將變化的值拿來對 view 的 Y 座標進行變化。
|
1 2 3 4 5 6 7 8 9 10 11 |
val animator = ValueAnimator.ofFloat(0f, -200f) animator.duration = 2000 animator.addUpdateListener(object: ValueAnimator.AnimatorUpdateListener { override fun onAnimationUpdate(valueAnimator: ValueAnimator?) { val value = valueAnimator?.animatedValue as Float donImageView.translationY = value } }) animator.start() |
也可以簡化成 lambda 形式：
|
1 2 3 4 5 6 7 8 9 |
val animator = ValueAnimator.ofFloat(0f, -200f) animator.duration = 2000 animator.addUpdateListener { valueAnimator -> val value = valueAnimator?.animatedValue as Float donImageView.translationY = value } animator.start() |
ValueAnimator 有支持 ofFloat ofInt 等不同參數的方法，並且支持連續參數。
比如下面的例子，就是先從 100f 到 -800f 然後再到 -400f 的動畫過程。
|
1 |
val animator = ValueAnimator.ofFloat(100f, -800f, -400f) |
AnimatorListener
ValueAnimator 的第二個監聽方法，可以監聽動畫的狀態：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
animator.addListener(object:Animator.AnimatorListener{ override fun onAnimationRepeat(p0: Animator?) { TODO("not implemented") //To change body of created functions use File | Settings | File Templates. } override fun onAnimationEnd(p0: Animator?) { TODO("not implemented") //To change body of created functions use File | Settings | File Templates. } override fun onAnimationCancel(p0: Animator?) { TODO("not implemented") //To change body of created functions use File | Settings | File Templates. } override fun onAnimationStart(p0: Animator?) { TODO("not implemented") //To change body of created functions use File | Settings | File Templates. } }) |
ObjectAnimator
為了不通過對 ValueAnimator 進行監聽來實現動畫，後來增加了一個繼承自 ValueAnimator 的 ObjectAnimator 類。
只需要幾行代碼就能實現 donImageView 針對 Y 軸的旋轉。
|
1 2 3 |
val animator = ObjectAnimator.ofFloat(donImageView, "rotationY", 0.0f, 360.0f) animator.duration = 200 animator.start() |
其中第二個參數 rotationY 就是我們想要做動畫的 property 名稱，
ObjectAnimator 會去尋找一個 setRotationY 的方法來進行賦值，從而實現動畫。
AnimatorSet
通過 AnimatorSet 我們可以同時或接連著做幾個動畫，常用的幾個方法有 .with / .before / .after / .playTogether
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// play animation one by one private val button1ClickHandler = View.OnClickListener { view -> val animator1 = ObjectAnimator.ofFloat(donImageView1,"translationY",0f, -800f, 0f) val animator2 = ObjectAnimator.ofFloat(donImageView2,"translationY",0f, 800f, 0f) val animatorSet = AnimatorSet() animatorSet.duration = 600 animatorSet.play(animator1).after(animator2) animatorSet.start() } // play animation at same time private val button2ClickHandler = View.OnClickListener { view -> val animator1 = ObjectAnimator.ofFloat(donImageView1,"translationY",0f, -800f, 0f) val animator2 = ObjectAnimator.ofFloat(donImageView2,"translationY",0f, 800f, 0f) val animatorSet = AnimatorSet() animatorSet.duration = 600 animatorSet.playTogether(animator1, animator2) animatorSet.start() } |
Interpolators
Interpolator 用來修飾動畫的執行效果。
這裡有一系列繼承自 BaseInterpolator 的加速器。
| AccelerateDecelerateInterpolator | An interpolator where the rate of change starts and ends slowly but accelerates through the middle. |
| AccelerateInterpolator | An interpolator where the rate of change starts out slowly and and then accelerates. |
| AnticipateInterpolator | An interpolator where the change starts backward then flings forward. |
| AnticipateOvershootInterpolator | An interpolator where the change starts backward then flings forward and overshoots the target value and finally goes back to the final value. |
| BaseInterpolator | An abstract class which is extended by default interpolators. |
| BounceInterpolator | An interpolator where the change bounces at the end. |
| CycleInterpolator | Repeats the animation for a specified number of cycles. |
| DecelerateInterpolator | An interpolator where the rate of change starts out quickly and and then decelerates. |
| LinearInterpolator | An interpolator where the rate of change is constant |
| OvershootInterpolator | An interpolator where the change flings forward and overshoots the last value then comes back. |
| PathInterpolator | An interpolator that can traverse a Path that extends from Point (0, 0) to (1, 1). |
只需要給 animator 指定 Interpolator 的實例就可以了。
|
1 2 3 |
val animator = ObjectAnimator.ofFloat(donImageView, "translationX", 0f, 600f, 0f) animator.interpolator = AccelerateDecelerateInterpolator() animator.start() |
參考
- 官方文件 – ValueAnimator
- 官方文件 – ObjectAnimator
- 官方文件 – Interpolators
- 可以到 Github 上看對應的 Source Code