A series of

• Animation | Android frame animation is analysed
• Shallow of animation animation | Android attributes
• Animation | animation analyses between Android to fill
• Animation | Android transition animations

What is property animation

Property animation, by modifying the properties of View itself, to achieve the effect of animation. For example, change the position of the view to make it move, and change the alpha of the view to make it transparent

What’s the difference between property animation and tween animation

Although both are animations, the biggest difference between them is that the tween animation only modifies the view part and does not change the properties of the view itself, whereas the property animation modifies its properties.

So View1 uses a property animation to move 200 pixels to the right, when it’s done, it’s 200 pixels and it clicks and View1 is clickable and View2 uses a tween animation to move 200 pixels to the right, when it’s done, it goes back to where it was, and, If you’re moving, clicking on view2 doesn’t do anything,

The essence of it is, the tween animation, it just looks like it’s moving, it’s never actually moving, the property animation is really moving

Using ViewPropertyAnimator

In terms of property animations, ViewPropertyAnimator is one of the most frequently used animations in Android development. Here is a simple example, moving 400 pixels to the right

view_anim.animate()
    .translationX(400f)
    .setDuration(1000)
    .start()
Copy the code

Property animation is implemented in one line of code and is very convenient to use. Look at the animate() method, which returns a ViewPropertyAnimator

public ViewPropertyAnimator animate(a) {
    if (mAnimator == null) {
        mAnimator = new ViewPropertyAnimator(this);
    }
    return mAnimator;
}
Copy the code

The specific methods that can be followed and the actual operation methods in the View corresponding to the methods are shown in the figure below:

What is the By method?

All viewPropertyAnimator-related methods have a By method. What does that mean?

Write a simple example to test it

 btn_translate.setOnClickListener {
    view_anim.animate()
        .translationX(200f)
        .setDuration(1000)
        .start()
    view_anim_2.animate()
        .translationXBy(200f)
        .setDuration(1000)
        .start()
}
Copy the code

You can see by contrast,

After moving the translationX to the specified position, clicking it again will no longer move it. After translationXBy is moved to the specified position, it will continue to move again By clicking the translationXBy method

Use ValueAnimator to animate properties

ValueAnimator: By listening for numeric changes, manually assign the value of the changed value to the properties of the object to achieve animation effect

Why say ValueAnimator first, even though it’s not very common, ObjectAnimator is derived from ValueAnimator

ValueAnimator can animate properties in two ways

The way code is used

ValueAnimator.ofFloat(0f.400f)
    .apply {
        duration = 1000
        / / listeners
        addUpdateListener {
            // Modify the view properties here
            view_anim_3.translationX = it.animatedValue as Float
        }
    }
    .start()
Copy the code

Using XML

Start by creating a new XML under res/ Animator using the Animator tag

      
<animator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueFrom="0f"
    android:valueTo="400f"
    android:valueType="floatType">

</animator>
Copy the code

// ValueAnimator in XML mode
val anim = AnimatorInflater.loadAnimator(this, R.animator.translate) as ValueAnimator
// Bind to view
anim.setTarget(view_anim_4)
// Add a listener
anim.addUpdateListener {
    view_anim_4.translationX = it.animatedValue as Float
}
anim.start()
Copy the code

The effect is exactly the same as the code

ValueAnimator has several important methods

ofFloat

ValueAnimator.ofInt(0f.400f)
android:valueType="floatType"
Copy the code

In the code setup above you can see that we use Valueanimator.offloat (0f, 1f) and android:valueType=”floatType” in XML

This transitions the initial value to the end value as a floating-point value

ofInt

ValueAnimator.ofInt(0.500)
android:valueType="intType"
Copy the code

The difference is that the initial value is passed to the end value as an integer value

ofObject

ValueAnimator ofObject(TypeEvaluator evaluator, Object... values)
Copy the code

TypeEvaluator is an evaluator that handles the logic of changing values as they change

As you can see from the source code, this is an interface

public interface TypeEvaluator<T> {

    public T evaluate(float fraction, T startValue, T endValue);

}
Copy the code

Click on its implementation class to find the FloatEvaluator and IntEvaluator valuators

public class FloatEvaluator implements TypeEvaluator<Number> {
    public Float evaluate(float fraction, Number startValue, Number endValue) {
        // Get the start value
        float startFloat = startValue.floatValue();
        // Start value + coefficient * (end value - start value)
        returnstartFloat + fraction * (endValue.floatValue() - startFloat); }}Copy the code

public class IntEvaluator implements TypeEvaluator<Integer> {
    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
        int startInt = startValue;
        return (int)(startInt + fraction * (endValue - startInt)); }}Copy the code

Copy the example above to write your own estimator

// Custom class
data class CustomData(
    var value: Float
)

Copy the code

// Custom valuer
class CustomEvaluator : TypeEvaluator<CustomData> {
    override fun evaluate( fraction: Float, startValue: CustomData, endValue: CustomData ): CustomData {
        var value = startValue.value
        value += fraction * (endValue.value - value)
        return CustomData(value)

    }

}
Copy the code

Using ofObject

 btn_translate.setOnClickListener {
    ValueAnimator.ofObject(CustomEvaluator(),CustomData(0f),CustomData(400f))
        .apply {
            duration = 1000
            addUpdateListener {
                view_anim.translationX =  (it.animatedValue as CustomData).value
            }
        }
        .start()
}

Copy the code

Animate properties using ObjectAnimator

ObjectAnimator is similar to ValueAnimator in that it assigns values to objects by listening for changes in value

• ObjectAnimator: Animates by listening for changes in values and automatically assigning values to the properties of objects
• ValueAnimator: By listening for numeric changes, manually assign the value of the changed value to the properties of the object to achieve animation effect

It is used in the same way as ValueAnimator

The way code is used

ObjectAnimator.ofFloat(view_anim_2, "translationX".0f.400f)
            .apply {
                duration = 1000
            }
            .start()
Copy the code

Using XML

Start by creating a new XML under res/ Animator using the objectAnimator tag

      
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:valueFrom="0f"
    android:valueTo="400f"
    android:valueType="floatType"
    android:propertyName="translationX">

</objectAnimator>

Copy the code

val animObj = AnimatorInflater.loadAnimator(this, R.animator.translate_obj) as ObjectAnimator
    // Bind to view
    animObj.target = view_anim_5
    animObj.start()
Copy the code

Interpolator Interpolator

There are essential differences between an interpolator and an estimator

• Interpolator determines the variation pattern of a value (constant velocity, Interpolator, etc.)
• A TypeEvaluator determines the specific value of the change in value

Android also offers a number of interpolators for developers to choose from

Table from Android Animation: Can you really use interpolators and estimators? (including detailed example teaching)

The system default interpolator is AccelerateDecelerateInterpolator, namely accelerated before slowing down

Listener for animation

Take a look at the Animator inheritance

Animator listener

First take a look at the listener of the Animator itself as an abstract class

• addPauseListener(AnimatorPauseListener listener)

  • onAnimationPause
  • onAnimationResume

• addListener(AnimatorListener listener)

  • onAnimationStart
  • onAnimationEnd
  • onAnimationCancel
  • onAnimationRepeat

Listener for ValueAnimator

• addUpdateListener(AnimatorUpdateListener listener)
  • onAnimationUpdate

ObjectAnimator

ObjectAnimator inherits from ValueAnimator, so it has all three interfaces

In Kotlin, addPauseListener and addListener are handled by extending functions

  val valueAnimator = ValueAnimator.ofFloat(0f.800f)
        valueAnimator
            .apply {
                duration = 2000
                repeatCount = ValueAnimator.INFINITE
                repeatMode = ValueAnimator.REVERSE
                addUpdateListener {
                    view_anim_2.translationX = it.animatedValue as Float
                }

                doOnEnd { view_anim_2.text = "Property animation finished" }
                doOnStart { view_anim_2.text = "Property animation begins" }
                doOnCancel { view_anim_2.text = "Property animation Curve" }
                doOnRepeat { view_anim_2.text = "Property animation Repeat" }

                doOnPause { view_anim_2.text = "Properties animation pause" }
                doOnResume { view_anim_2.text = "Properties animated Reply" }

            }
            .start()

        view_anim_2.setOnClickListener {
            if(! valueAnimator.isPaused){ valueAnimator.pause() }else{
                valueAnimator.resume()
            }

        }

Copy the code

The last

In this paper, the blog