Android Animation learning Demo (3) Property Animation moving along the beiser Curve

Property Animation is the most important. The most basic class is ValueAnimator. Property Animation uses ValueAnimator to track how long the object Property has changed and the value of the current time point.

ValueAnimator encapsulates two classes:

1) TimeInterpolator, also called interpolation, is a time-related proportional factor used to calculate the current animation motion.

2) TypeEvaluator: this is to use the TimeInterpolator to calculate the position where the current animation is running.

This is too abstract. Let's use natural language to describe the entire animation process.

The principle of animation is actually a frame of pictures following the chronological order, forming a visual residual effect in our eyes. Therefore, in animation, the concept of time is very important. Only time changes can form the animation effect.

0) the animation preparation starts. Here we set the animation duration (duration). If this parameter is not set, the animation duration is 300 milliseconds, the time displayed on each screen is 10 ms. At the same time, the start value and end value of a property value change in this time period are also set. That is to say, during the duration time, the property value must change from start to end.

1) The animation starts. After t time, ValueAnimator will calculate an elapsed fraction Based on t/duration. That is to say, the time is now t, let's assume that the duration of the total time is 3 T, that is, it has passed 1/3, and the attribute value should also change to 1/3.

2) The Animation continues. Now it's 2 T, so now the animation time has passed 2/3. Has this attribute value changed to 2/3.

3) now 3 t, the animation is over, and the attribute value has changed from start to end.

Now the problem arises. If this is the case, isn't the animation always very uniform? Yes, if LinearInterpolator is used.

TimeInterpolatorTimeInterpolator is a class used to change the animation speed. Why is it called an interpolation tool? I understand that the animation was originally taking a very good step by step on the time point. It inserted some values in the middle, or pulled some values out, it makes the whole road difficult to go, and the front changes to uphill, And it slows down. Originally, after t time, the animation screen should be at the position of 1/3, however, if the road is not easy to go, it will go less than 1/3, but may only go 1/4, and the back is downhill. With excitement, the pace will be much faster and catch up with it again, however, no matter how the path changes in the middle, when the time is reached, it must have just arrived at the final position. There are nine Interpolator provided in Android: 1) AccelerateDecelerateInterpolator: acceleration before deceleration.
2) AccelerateInterpolator: always accelerate.
3) AnticipateInterpolator.
4) AnticipateOvershootInterpolator.
5) BounceInterpolator: it finally plays a few rounds like a ball.
6) CycleInterpolator: Repeat several times and it feels like a ring progress bar. I haven't tried it yet.
7) DecelerateInterpolator: always slow down.
8) LinearInterpolator: Linear. This is what we have mentioned above.
9) OvershootInterpolator: after arriving at the end point, go back later. There is a parameter that can be defined and exceeds the intensity.
These Interpolator are classes that implement the TimeInterpolator interface. They only need to implement one method: getInterpolation (float input), and re-calculate this proportion based on their own needs.
Step 1:After a certain time t is reached, ValueAnimator will calculate a certain proportion of fraction = t/duration, and Interpolator will receive this proportion fraction, and then call its getInterpolation method to recalculate this proportional factor, returns a new proportional factor. For example, the method implemented by LinearInterpolator remains unchanged, as shown below:

public float getInterpolation(float input) {    return input;}

AccelerateDecelerateInterpolator calculates the proportional factor based on the symmetry change of the cosine function, as shown below:

public float getInterpolation(float input) {    return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;}

As mentioned above, through the interpolation of Interpolator in step 1, we will get a proportional factor. Next we will use our TypeEvaluator.
TypeEvaluator Step 2:TypeEvaluator accepts the proportional factor calculated in step 1, calculates the value of the current attribute, and returns it to ValuaAnimator. ValueAnimator sets the value of the corresponding attribute. For example, I wrote a BezierTypeEvaluator, which allows a button to move along the BezierTypeEvaluator according to time changes, as shown below:

class BezierEvaluator implements TypeEvaluator
 
  {@Overridepublic PointF evaluate(float fraction, PointF startValue,PointF endValue) {final float t = fraction;float oneMinusT = 1.0f - t;PointF point = new PointF();PointF point0 = (PointF)startValue;PointF point1 = new PointF();point1.set(width, 0);PointF point2 = new PointF();point2.set(0, height);PointF point3 = (PointF)endValue;point.x = oneMinusT * oneMinusT * oneMinusT * (point0.x) + 3 * oneMinusT * oneMinusT * t * (point1.x)+ 3 * oneMinusT * t * t * (point2.x)+ t * t * t * (point3.x);point.y = oneMinusT * oneMinusT * oneMinusT * (point0.y) + 3 * oneMinusT * oneMinusT * t * (point1.y)+ 3 * oneMinusT * t * t * (point2.y)+ t * t * t * (point3.y);return point;}}
 

To customize TypeEvaluator, we must implement its evaluate method to calculate the value of the attribute corresponding to the current object, and it will receive three parameters, one is the proportion calculated through interpolator in the above text, and the starting and ending values we set when creating an animation.
ValueAnimator. AnimatorUpdateListener since we have calculated the value of an attribute of the object at the t moment, we need to reset this value to the object to make it work. So ValueAnimator also provides an internal Listener interface, which has only one method, that is, to obtain the value calculated by TypeEvaluator and set it to the corresponding attribute, such as the Code in our Demo:

valueAnimator.addUpdateListener(new AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {PointF pointF = (PointF)animation.getAnimatedValue();button.setX(pointF.x);button.setY(pointF.y);}});

Here we change the X and Y coordinates of the Button to change its specific position. As for the validate and the re-drawing process, ValueAnimator has helped us implement these basic attributes. Next, let's take a look, and then summarize the implementation mechanism of ValueAnimator. Download
Well, this article is probably like this. If you are interested in the application of Property Animation, you can take a look at the usage and summary of Property Animation in the Android Animation learning Demo (2 ).

Finally, we should remind you that Property Animation is only supported after 3.0. If you want to apply these attributes before 3.0, you can download the nineoldandroids package of jake wharton, basically, you can set the method directly. However, according to my experiment, there are still some methods. For example, PropertyValuesHolder may have some bugs. I will put this package here, too,
Click NineoldAndroids to download