Android Property animations: Interpolator and Estimator

Disclaimer: This article is part of "Android Development art exploration".

We all know that for property animations you can animate a property, and the interpolator (timeinterpolator) and the Estimator (typeevaluator) play an important role in it, so let's look at timeinterpolator and typeevaluator.

Timeinterpolator (Time Interpolator):

Effect: calculates the percentage of the current attribute value change based on the percentage of elapsed time.

The system has an existing interpolator:

• linearinterpolator (Linear interpolator): constant speed animation.

• Acceleratedecelerateinterpolator (Accelerated deceleration interpolator): animation at both ends slow, middle fast.

• decelerateinterpolator (deceleration interpolator): animations are getting slower.

Typeevaluator (type valuation algorithm, or estimator):

Effect: calculates the changed attribute value based on the percentage of the current property change.

The system has an existing estimator:

• intevaluator: for integer attributes

• floatevaluator: for floating-point properties

• Argbevaluator: for the Color property

so timeinterpolator and Typeevaluator . How does it work together?

They are an important means to achieve non-uniform animation . Property animation is the property animation, the property to achieve animation, first by the timeinterpolator(interpolator) based on the percentage of time elapsed to calculate the current value of the change in the percentage of property values, and the interpolator This percentage is returned, and the work of the interpolator is completed at this time.

For example, the value returned by the interpolator is 0.5, it is obvious that we want not 0.5, but the value of the current property, that is, the current property becomes what value, which requires the estimator Based on the percentage of changes in the current property, we can set the value of the current property based on the value of the property.

SOURCE Analysis

The above theoretical knowledge may be more abstract, the following according to an example combined with the system source code to analyze:

Represents a constant speed animation using a linear interpolator and an integer valuation algorithm, within 40ms , the view's x attribute is transformed from 0 to a.

Because the default refresh rate for animations is 10ms/frames , the animation is divided into 5 frames .

When the animation goes to the third frame , (x=20,t=20ms) when the time t=20ms , the time elapsed percentage is 0.5 (20/40=0.5), that time is over half. This percentage is not what we ultimately want, we are concerned about the change of x, so how much should x change? The Interpolator and valuation algorithms work. For linear interpolator , linear interpolator is a constant speed animation, first look at the linear interpolator The source code:

Obviously, the return value of the linear interpolator is the same as the input value (see getinterpolation method), so t=20ms The value returned by the interpolator is 0.5, which means that the change in the X attribute is 0.5. This time the work of the interpolator has been completed, and the work of the interpolator is to calculate the percentage of the current attribute value change based on the percentage of elapsed time.

We get the percentage of the current attribute change is 0.5, which is 50%. The next step is to figure out what the value of x becomes, and this time the valuation Algorithm works, and its function is to calculate the changed attribute value based on the percentage of the current attribute change. Let's take a look at the source code for the system-provided integer valuation algorithm :

The three parameters of the Evaluate method in the preceding code represent the estimated decimal (fraction), the starting value (Startvalue), and The end value (endvalue). The example for us is 0.5,0 andmax. We put these three values into the evaluation, namely:0+0.5* (40-0) =20. Yes, this is The origin of x=20 when t=20ms.

In fact , for the interpolator and estimator , in addition to the system provided, we can also customize . The implementation is also very simple, because the interpolator and the estimator are both an interface, and there is only one method inside, we can just implement the interface, we can make a lot of brilliant animation. Where custom interpolator is required to implement interpolator or Timeinterpolator, a custom Estimator needs to implement Typeevaluator.

But in general, the interpolator is sufficient to use the system, and the estimator may be more customizable, Also, if you want to animate other types (non-int, float, color), you must customize the type estimation algorithm.

Code Demo (i)

Here we use two ways to achieve the parabolic trajectory, a fixed-time parabolic , a fixed-length parabola .

The ball runs in the parabolic trajectory for 1.5 seconds (referring to the parabolic effect of the great God of Hon Yang):

First analyze the implementation process:

To achieve the effect of parabolic, horizontal direction 200px/s, vertical acceleration 200px/s*s, you will find that we only need to know the time of the change, we can get a small ball of the horizontal displacement (that is, x) and the value of displacement (that is, y). so the formula is: x = 200t; Y=200t2.

But another problem is that we want to record two values and estimate algorithms at the same time, so we can create a point class to hold these two values. Previously we used the valueanimator offloat () and Ofint () methods , respectively, for floating- point and integer data is animated, but there is actually a ofobject () method in the valueanimator , is used to animate an arbitrary object.

Animating an object is significantly more complicated than floating-point or integer data, because the system will never know how to get from the initial object to the end object, so this time we need to implement a typeevaluator To tell the system how to overdo it. The object we want to overdo here is the point object .

First, define a point class as follows:

1 /**2 * class for saving ball coordinates3  */4  Public classPoint {5     floatx;6     floaty;7     8      PublicPoint () {}9     Ten      PublicPoint (floatXfloaty) { One          This. x =x; A          This. y =y; -     } -}

The point class is very simple, and the x and y two variables are used to record the position of coordinates and provide two construction methods.

Next , customize the valuation algorithm to tell the system how to implement the initial object to the end of the object (for the interpolator , we use the system's linear interpolator no need to customize):

For a custom valuation algorithm , you need to specify a generic, where we manipulate the point object, and when we specify point as a generic, the return value of the Evaluate method is also the point , and startvalue and endvalue are also point types, so that's right, In the custom valuation algorithm , we can use the point object directly.

But one problem you'll find is that we didn't use startvalue and endvalue, but we used a 1.5fthat wrote dead , Because there is no need, our parabola is tied to time, without them is also completely possible, so write, the effect is: The ball runs 1.5s trajectory map . (We'll also have an example of how the custom valuation algorithm is calculated using Startvalue and Endvalue).

The layout is simple, a relativelayout contains a ImageView that shows a small ball and a the button to manipulate. It's not posted here.

Here 's a look at the mainactivity code:

With code discovery, we call Valueanimator's Ofobject () method to build an instance of valueanimator , and it's important to note that The ofobject ( ) method requires more than one typeevaluator parameter, and here we just need to pass the defined An example of Mytypeevaluator is available.

And we set the duration of 1500ms , where the 1500ms and the custom estimator inside the 1.5f is not the same thing, that is, even if we set the 2000ms duration, The resulting ball trajectory is the same, because the 1.5f inside the custom estimator is written dead .

Operating effect:

We find that the ball is really parabolic, but look at the code carefully and you will find that we have not specified the placement of the ball, that is, the end of the point object , then where is the ball placement? In fact, we can figure out, that is, x=200*1.5=300;y=200*1.5*1.5=450. But now we need to change the demand, the small ball just landed on the right edge of the screen, rather than to find the exact time of the ball trajectory.

The small ball runs to the right edge of the screen (the parabolic effect you try) by a parabolic trajectory:

We know that y=ax^2 is also a parabolic formula, but looking at this formula, you will find that it is not based on T, but the relationship between Y and X, which means that the change of Y is directly linked to X. And for y=ax^2, we know that a smaller, the larger the opening, so for the parabolic effect good-looking, we use the a=0.001.

To achieve this effect, you can actually use the ofobject () method without a custom valuation algorithm, directly using offloat () can also be achieved by directly using the system's estimator. We can set a constant speed animation for the X property , and then set the listener to implement the property values for x and Y.

The code is as follows:

Operating effect:

Indeed, the ball in the right side of the stop, is the effect we want.

In fact, there should be a lot of ways to achieve the parabolic effect. Combined with the mathematical formula can also make a lot of effects, such as the positive selection curve motion.

Code Demo (ii)

Above we demonstrate the parabolic effect, let's take another effect, this time we want to customize the valuation algorithm and use the Startvalue and endvalue parameters to do the algorithm.

Custom Valuation algorithm:

The code is as follows:

Take a look at the idea:

2. The point class is first created to hold the coordinate information, and the point object is the object we want to manipulate.

4. The Custom valuation algorithm mytypeevaluatorand formulates generics for the point type, in the evaluate method To assign a value to the X and Y of the point object and return the object.

6. Call the valueanimator.ofobject () method in mainactivity to get Valueanimator the object and passes in the original object of the custom Estimator object and point and terminates the object.

8. Set the animatorupdatelistener Listener for the Valueanimator object, the point object is returned in the valuation algorithm onanimationupdate () through point point animation.getanimatedvalue (); and set the new X and Y values for the ball.

The results are as follows:

Yes, the ball runs from the (0,0) coordinates to the (200,300) coordinates and runs as we expect.

Android Property animations: Interpolator and Estimator