使用哪个Android Animator?

Android provides us with an Animator class, which consists of a great set of functionality classes allowing us to perform any animations on our view.

Android为我们提供了一个Animator类,该类由一组功能强大的类组成,使我们可以在视图上执行任何动画。

Image for post
https://youtu.be/N_x7SV3I3P0?list=PLmEM3-F7iVMlm936VEVxlITwdn60XJQX0&t=355 https://youtu.be/N_x7SV3I3P0?list=PLmEM3-F7iVMlm936VEVxlITwdn60XJQX0&t=355

Many of them do similar things, which makes it hard for us to choose. Here, I provide a simple guide on selecting according to your needs.

他们中许多人做类似的事情,这使我们很难选择。 在这里,我提供了有关根据您的需求进行选择的简单指南。

1.使用ViewPropertyAnimator进行简单动画 (1. Use ViewPropertyAnimator for Simple Animation)

If you plan to animate just one view, with basic animations, and you don’t plan to repeat it, just use ViewPropertyAnimator.

如果您打算使用基本动画仅对一个视图进行动画处理 ,并且不打算重复该视图,请使用ViewPropertyAnimator

txt_animate.animate().apply {
rotationX(3600f)
duration = 5000
interpolator = AccelerateDecelerateInterpolator()}.start()
Image for post
Animate one direction once.
一次对一个方向进行动画处理。

Use this approach if you want a most concise animation as you don’t need to instantiate any Animator object yourself.

如果您想要最简洁的动画,因为您不需要自己实例化任何Animator对象,请使用此方法。

However, it has limitations:

但是,它有局限性:

  • The animation can’t be repeated.

    动画无法重复。
  • You only have an end value to animate to and no start value.

    您只有要设置动画的最终值,而没有初始值。
  • Only basic animations are available to the animate function.

    animate功能仅可使用基本动画

Note: for the above animation, if you want it to repeat again manually, you have to set the value to its origin. i.e. for our case, set the rotationX = 0f as below, since the animation has moved it to 3600f previously.

注意:对于上述动画,如果希望它再次手动重复,则必须将值设置为其原点。 例如,对于我们的情况, 由于动画之前已将其移动到 3600f ,请如下 设置 rotationX = 0f

txt_animate.rotationX = 0f
txt_animate.animate().apply {
rotationX(3600f)
duration = 5000
interpolator = AccelerateDecelerateInterpolator()}.start()

2.使用ObjectAnimator重复动画 (2. Use ObjectAnimator for Repeating Animation)

If you only want to animate one view and one basic animation, but you want it to repeat, use ObjectAnimator.

如果您只想为一个视图和一个基本动画制作动画 ,但又想重复播放,请使用ObjectAnimator

ObjectAnimator.ofFloat(txt_animate, 
View.ROTATION_X, 0f, 3600f)
.apply {
duration = 5000
interpolator = AccelerateDecelerateInterpolator()
repeatCount = INFINITE
repeatMode
= REVERSE
start()}
Image for post
Animate infinitely and reverse the animation each time.
无限进行动画处理,并每次都反转动画。

This is the most commonly used animation approach. It forms the base of the most basic animation. Unlike ViewPropertyAnimator, it has a start animate value, so it’s repeatable.

这是最常用的动画方法。 它构成了最基本的动画的基础。 与ViewPropertyAnimator不同,它具有起始动画值,因此是可重复的。

As shown above, it’s still limited to basic animation, as the View Properties (e.g. View.ROTATION_X) are limited to ALPHA, X, Y, Z, TRANSITION_X, TRANSITION_Y, TRANSITION_Z, ROTATION_X, ROTATION_Y, ROTATION, SCALE_X, SCALE_Z. For more information see the article below:

如上所示,它仍然限于基本动画 ,因为View属性( 例如 View.ROTATION_X )限于ALPHA, X, Y, Z, TRANSITION_X, TRANSITION_Y, TRANSITION_Z, ROTATION_X, ROTATION_Y, ROTATION, SCALE_X, SCALE_Z 。 有关更多信息,请参见下面的文章:

动画任何属性 (Animating any property)

If we need other property types to be animated too, we could use the reflective approach, where we just provide the string name of the properties to ObjectAnimator as below (i.e. textColor).

如果我们还需要对其他属性类型进行动画处理,则可以使用反射方法,在该方法中,我们仅向ObjectAnimator提供属性的字符串名称,如下所示(即textColor )。

ObjectAnimator.ofArgb(
txt_animate, "textColor",
Color.parseColor("#FFFF0000"), Color.parseColor("#FF0000FF")
).apply {
duration = 5000
interpolator = AccelerateDecelerateInterpolator()
repeatCount = INFINITE
repeatMode
= REVERSE
start()}
Image for post
Animate on the text color from red to blue
从红色到蓝色对文本颜色进行动画处理

The above shows an example of animation on textColor using the ofArgb functions on ObjectAnimator. This makes ObjectAnimator relatively powerful and capable of animating properties of any view.

以上示出了动画的示例textColor使用ofArgb功能上ObjectAnimator 。 这使得ObjectAnimator相对强大并且能够对任何视图的属性进行动画处理。

Nonetheless, it is preferable to use the given Property View for animation using the reflection approach, as it has better performance.

但是,最好使用给定的“属性视图”通过反射方法进行动画处理,因为它具有更好的性能。

基于XML的对象Animator (XML based object Animator)

We could also use XML to define our object animator:

我们还可以使用XML定义对象动画师:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:duration="5000"
android:propertyName="textColor"
android:valueFrom="#FFFF0000"
android:valueTo="#FF0000FF"
android:valueType="colorType"/>

Then load the XML using the following code:

然后使用以下代码加载XML:

(AnimatorInflater.loadAnimator(this,R.animator.custom_animator) as    
ObjectAnimator).apply {
target = txt_animate
start()}

One limitation of ObjectAnimator is it is only able to perform a single animation on the view.

ObjectAnimator一个限制是它只能在视图上执行单个动画。

3.将PropertyValueHolders用于视图上的多个动画 (3. Use PropertyValueHolders for Multiple Animations on a View)

If we want to animate more than one animation in a single view, like a combination of the rotation and text color change above, we’ll need to use PropertyValueHolder on top of ObjectAnimator.

如果要在单个视图中制作多个动画,例如上面的旋转和文本颜色更改的组合,则需要在ObjectAnimator之上使用PropertyValueHolder

val rotationX = PropertyValuesHolder.ofFloat(
View.ROTATION_X, 0f, 3600f)
val textColor = PropertyValuesHolder.ofInt(
"textColor",
Color.parseColor("#FFFF0000"),
Color.parseColor("#FF0000FF")
)
textColor.setEvaluator(ArgbEvaluator())
ObjectAnimator.ofPropertyValuesHolder(txt_animate,
rotationX, textColor).apply {
duration = 5000
interpolator = AccelerateDecelerateInterpolator()
repeatCount = INFINITE
repeatMode
= REVERSE
start()
}
Image for post
Combination of rotation and text color animation
旋转和文本颜色动画的结合

The PropertyValuesHolder can accept both provided View Properties ALPHA, X, Y, Z, TRANSITION_X, TRANSITION_Y, TRANSITION_Z, ROTATION_X, ROTATION_Y, ROTATION, SCALE_X, SCALE_Z) as well as any view object properties through reflection (e.g. textColor, backgroundColor).

PropertyValuesHolder既可以接受提供的视图属性ALPHA, X, Y, Z, TRANSITION_X, TRANSITION_Y, TRANSITION_Z, ROTATION_X, ROTATION_Y, ROTATION, SCALE_X, SCALE_Z ,也可以接受任何通过反射的视图对象属性(例如textColorbackgroundColor )。

基于XML的属性视图持有人 (XML based property views holder)

We could use XML to define our Property Views Holder as well

我们也可以使用XML来定义属性视图持有人

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:duration="5000" >
<propertyValuesHolder
android:propertyName="rotationX"
android:valueFrom="0"
android:valueTo="3600"
android:valueType="floatType" />
<propertyValuesHolder
android:propertyName="textColor"
android:valueFrom="#FFFF0000"
android:valueTo="#FF0000FF"
android:valueType="colorType" />
</objectAnimator>

Then load the XML with the following in the code:

然后在代码中使用以下内容加载XML:

(AnimatorInflater.loadAnimator(this, R.animator.custom_animator) as 
ObjectAnimator).apply {
target = txt_animate
start()}

This use is only limited to animation that happens at the same time on the same view.

这种用法仅限于在同一视图上同时发生的动画。

4.将AnimatorSet用于多个视图和排序动画 (4. Use AnimatorSet for Multiple Views and Sequencing Animations)

Assuming you have multiple views to animate, or you have one view but would like to sequence the animations one after the other, you will need to use AnimatorSet.

假设您有多个要设置动画的视图,或者您有一个视图但又想一个接一个地对动画进行排序,则需要使用AnimatorSet

val rotationX = PropertyValuesHolder.ofFloat(
View.ROTATION_X, 0f, 3600f)
val textColorX = PropertyValuesHolder.ofInt(
"textColor",
Color.parseColor("#FFFF0000"),
Color.parseColor("#FF0000FF")
)
textColorX.setEvaluator(ArgbEvaluator())
val rotateXColor =
ObjectAnimator.ofPropertyValuesHolder(
txt_animate, rotationX, textColorX).apply {
duration = 5000
interpolator = AccelerateDecelerateInterpolator()
}val rotationY = PropertyValuesHolder.ofFloat(
View.ROTATION_Y, 0f, 3600f)
val textColorY = PropertyValuesHolder.ofInt(
"textColor",
Color.parseColor("#FF0000FF"),
Color.parseColor("#FFFF0000")
)
textColorY.setEvaluator(ArgbEvaluator())
val rotateYColor =
ObjectAnimator.ofPropertyValuesHolder(
txt_animate, rotationY, textColorY).apply {
duration = 5000
interpolator = AccelerateDecelerateInterpolator()
}
AnimatorSet().apply {
play(rotateYColor).after(rotateXColor)
start()
}
Image for post
Rotate X with text color change and followed by rotate Y with text color change
旋转X更改文本颜色,然后旋转Y更改文本颜色

A combination of ObjectAnimator, PropertyValuesHolder, and AnimatorSet, you get a relatively powerful set of animation.

结合ObjectAnimatorPropertyValuesHolderAnimatorSet ,您可以获得相对强大的动画集。

One disadvantage of AnimatorSet is, it doesn’t allow repeat on its animation set.

AnimatorSet一个缺点是,不允许在其动画集上重复播放。

基于XML的动画师集 (XML-based animator set)

We could also use XML to define our animator set:

我们还可以使用XML定义动画集:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="sequentially">
<objectAnimator android:duration="5000"
android:interpolator=
"@android:interpolator/accelerate_decelerate">
<propertyValuesHolder
android:propertyName="rotationX"
android:valueFrom="0"
android:valueTo="3600"
android:valueType="floatType" />
<propertyValuesHolder
android:propertyName="textColor"
android:valueFrom="#FFFF0000"
android:valueTo="#FF0000FF"
android:valueType="colorType" />
</objectAnimator>
<objectAnimator
android:duration="5000"
android:interpolator="@android:interpolator/accelerate_decelerate">
<propertyValuesHolder
android:propertyName="rotationY"
android:valueFrom="0"
android:valueTo="3600"
android:valueType="floatType" />
<propertyValuesHolder
android:propertyName="textColor"
android:valueFrom="#FF0000FF"
android:valueTo="#FFFF0000"
android:valueType="colorType" />
</objectAnimator>
</set>

Then load the XML with the following in the code:

然后在代码中使用以下内容加载XML:

(AnimatorInflater.loadAnimator(this, R.animator.custom_animator) as 
AnimatorSet).apply {
setTarget(txt_animate)
start()}

5.使用ValueAnimator进行可自定义的动画 (5. Use ValueAnimator for Customizable Animation)

Assuming you would want to animate something that’s not a property of a view or an object, then you would need to use the most basic animator class: ValueAnimator.

假设您想对不是视图或对象属性的东西进行动画处理,那么您将需要使用最基本的动画师类: ValueAnimator.

To demonstrate this, we plan to animate the text color gradient:

为了证明这一点,我们计划为文本颜色渐变设置动画:

val paint: TextPaint = txt_animate.paintval width = paint.measureText(txt_animate.text.toString())val textShader: Shader = LinearGradient(
0f, 0f, width, txt_animate.textSize,
intArrayOf(Color.GREEN, Color.BLACK, Color.MAGENTA),
null, Shader.TileMode.CLAMP
)txt_animate.paint.shader = textShader
txt_animate.invalidate()

Looking at the above code, it is clear that it's not a simple property of text. We want to animate through from the following set of colors:

通过上面的代码,很明显这不是文本的简单属性。 我们要通过以下颜色设置动画:

intArrayOf(Color.RED, Color.RED, Color.RED),intArrayOf(Color.RED, Color.RED, Color.GREEN),intArrayOf(Color.RED, Color.GREEN, Color.BLACK),intArrayOf(Color.GREEN, Color.BLACK, Color.MAGENTA),intArrayOf(Color.BLACK, Color.MAGENTA, Color.BLUE),intArrayOf(Color.MAGENTA, Color.BLUE, Color.BLUE),intArrayOf(Color.BLUE, Color.BLUE, Color.BLUE)
Image for post
Animate flowing gradient color on the text
动画文字上渐变的颜色

Let’s see how we can achieve this.

让我们看看如何实现这一目标。

创建一个自定义评估器 (Create a custom evaluator)

From the above, you can see that the start and end value of the animation is IntArray of Color. So, we’ll need to custom make the transition we want.

从上面可以看到,动画的开始和结束值为IntArray of Color 。 因此,我们需要自定义进行所需的过渡。

Android provides us with the interface TypeEvaluator<T> for us to implement the Evaluator:

Android为我们提供了interface TypeEvaluator<T>供我们实现Evaluator

class GradientArgbEvaluator : TypeEvaluator<IntArray> {
private val argbEvaluator = ArgbEvaluator()
override fun evaluate(fraction: Float,
startValue: IntArray, endValue: IntArray): IntArray {
require(startValue.size == endValue.size)
return startValue.mapIndexed { index, item ->
argbEvaluator.evaluate(
fraction, item, endValue[index]) as Int
}.toIntArray()
}
}

We leverage ArgbEvaluator that’s already provided by Android and make it handle the IntArray of colors for us, as above.

ArgbEvaluator ,我们利用了Android已经提供的ArgbEvaluator ,并使其为我们处理了IntArray颜色。

用侦听器实现ValueAnimator。 (Implement ValueAnimator with listener.)

With the GradientArgbEvaluator, we’re ready to implement ValueAnimator:

有了GradientArgbEvaluator ,我们就可以实现ValueAnimator

val paint: TextPaint = txt_animate.paintval width = paint.measureText(txt_animate.text.toString())ValueAnimator.ofObject(
GradientArgbEvaluator(),
intArrayOf(Color.RED, Color.RED, Color.RED),
intArrayOf(Color.RED, Color.RED, Color.GREEN),
intArrayOf(Color.RED, Color.GREEN, Color.BLACK),
intArrayOf(Color.GREEN, Color.BLACK, Color.MAGENTA),
intArrayOf(Color.BLACK, Color.MAGENTA, Color.BLUE),
intArrayOf(Color.MAGENTA, Color.BLUE, Color.BLUE),
intArrayOf(Color.BLUE, Color.BLUE, Color.BLUE)
).apply {
repeatMode = REVERSE
repeatCount
= INFINITE
duration
= 5000
interpolator = AccelerateDecelerateInterpolator()
addUpdateListener {
val textShader: Shader = LinearGradient(
0f, 0f, width, txt_animate.textSize,
it.animatedValue as IntArray, null,
Shader.TileMode.CLAMP
)
txt_animate.paint.shader = textShader
txt_animate.invalidate()
}
start()}

As shown in code above, ValueAnimator is almost like ObjectAnimator, except it doesn’t have a specific view to target. It has to have a listener — i.e. addUpdateListner — to listen to the value change and behave accordingly. This added more code, but better customization for it.

如上面的代码所示, ValueAnimator几乎与ObjectAnimator ,只是它没有特定的视图作为目标。 它必须具有一个侦听器(即addUpdateListner )以侦听值更改并相应地执行操作。 这增加了更多的代码,但为其提供了更好的自定义。

汇总表 (Summary Table)

Here’s a table for easily identifying which Animator function you could use:

这是一个表格,可轻松识别您可以使用的Animator功能:

Image for post

I hope this has given you some useful guidance. You can get the code here to access all of the information above.

希望这对您有所帮助。 您可以在此处获取代码以访问上面的所有信息。

翻译自: https://medium.com/mobile-app-development-publication/which-android-animator-to-use-ced54e21d317

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值