In the last blog mainly discussed the use of property animation, I believe that through the last blog we are no stranger to the use of property animation, so today we will discuss the implementation process of property animation.
Interpolator and TypeEvaluator work together when it comes to the execution of attribute animation, this blog explores how the two work together. Through this blog you will learn the following: Interpolator and TypeEvaluator are interpolated and interpolated respectively. Interpolator and TypeEvaluator work together. Interpolator and TypeEvaluator are interpolated and interpolated together. As mentioned before, the official documentation for learning the basics is the same. The official documentation begins with the following example: As shown in the figure below, it depicts a hypothetical object that is animated by the x property to represent its horizontal position on the screen. The duration of the animation is set to 40 ms and the driving distance is set to 40 pixels. Every 10 ms, which is the default frame refresh rate, the object moves 10 pixels horizontally. At the end of 40ms, the animation stops and the object ends at 40 horizontal positions. This is an example of animation with linear interpolation, meaning that objects move at a constant speed.
/**
* An interpolator where the rate of change is constant
*/
@HasNativeInterpolator
public class LinearInterpolator extends BaseInterpolator implements NativeInterpolatorFactory {
public LinearInterpolator() {
}
public LinearInterpolator(Context context, AttributeSet attrs) {
}
public float getInterpolation(float input) {
return input;
}
/** @hide */
@Override
public long createNativeInterpolator() {
return NativeInterpolatorFactoryHelper.createLinearInterpolator();
}
Copy the codeFrom getInterpolator we can see that the return value of a linear interpolator is the same as the input value. The getInterpolator() method will accept an input parameter whose value will change with the motion of the animation, but at a regular rate of zero to one based on the given animation length. That is when the animation at the start of the input value is 0, the animation at the end of the input value is 1, and the value of the middle is over running the length of the animation changes between 0 and 1, said it is the percentage of the time, its role is calculated according to the percentage of time the percentage of the current property value change, In this example, when t=20ms, the elapsed time percentage is 20/40=0.5 because the total elapsed time is 40ms. We have just said that the interpolator is used to get the percentage of time that has elapsed, so how do we calculate the percentage of change in the property value from this percentage? This is where the estimator comes in. Its function is to calculate the value of the changed attribute based on the percentage of the current attribute change. Similarly, let’s take a look at the source code of the algorithm provided by the system:
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 codeAs you can see, the evaluate method takes three parameters. The first parameter, fraction, is very important and represents the degree of completion of the animation. The second and third parameters are the initial and end values of the animation. So in the code above, subtract the initial value from the end value to get the difference between them, then multiply the fraction coefficient and add the initial value to get the current value of the animation. “Input” is a fraction. “input” is a fraction. “input” is a fraction. The answer is simple. The value of input determines fraction. The input value is calculated by the system and passed into the getInterpolation() method. Then we can implement the algorithm in getInterpolator() to compute a return value based on the input value. This return value is a fraction. It is particularly important to understand the relationship between these two values. At t=20ms, the input value is 20/40=0.5. The animation is 50% complete. GetInterpolator () returns a fraction. It is used to evaluate the x property. The evaluate values of IntEvaluator are 0.5, 0,40. After substitution, 0+0.5*(40-0)=20. And you can see that this matches the figure above when t is equal to 20ms, x is 20. This is how property animation works, and of course this is the simplest case we’re talking about.
For interpolators and estimators, we can also customize them in addition to those provided by the system. The implementation is also very simple, because the interpolator and the estimator are both an interface with only one method inside, so we can just implement the interface and do a lot of fancy animations. Where, a custom Interpolator needs to implement Interpolator or TimeInterpolator, and a custom evaluator needs to implement TypeEvaluator. But in general, the interpolator is usually enough to use the system, the estimator is generally more customized, in addition, if you want to animate other types (non-int, float, color), you must customize the type estimation algorithm. To customize TypeEvaluator from defining a TypeEvaluator, here’s what you can do:
public class PointView {
float x;
float y;
public PointView(){
}
public PointView(float x, floaty) { this.x=x; this.y=y; }}Copy the codeWith these two values we can customize a TypeEvaluator
class PointViewEvaluator implements TypeEvaluator {
@Override
public Object evaluate(floatfraction, Object startValue, Object endValue) { PointView pointView=new PointView(); Pointview. x=400*(fraction*2); pointView.y=400*(fraction*2)*(fraction*2);returnpointView; }}Copy the code(x=400t,y=400t²); (x=400t ²,y=400t²); After the customization, we can take it directly to use the code as follows
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ImageView ivBall;
private Button btnClick;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); ivBall=findViewById(R.id.iv_ball); btnClick=findViewById(R.id.btn_click); btnClick.setOnClickListener(this); } @Override public void onClick(View view) { ValueAnimator valueAnimator=ValueAnimator.ofObject(new PointViewEvaluator (), new PointView (0, 0)); valueAnimator.setDuration(2000); valueAnimator.setInterpolator(new LinearInterpolator()); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { PointView pointView= (PointView) valueAnimator.getAnimatedValue(); ivBall.setX(pointView.x); ivBall.setY(pointView.y); }}); valueAnimator.start(); }}Copy the codeThe LinearInterpolator is set to a LinearInterpolator. At the same time, we add a listener to the animation and then fetch the current PointView object. The purpose of this fetch is to get the values of x and y of the PointView object, and then set these values to the ball, which will behave as a parabolic motion. Custom Interpolator is interpolated at last. Interpolator is seldom used, but it is important to know how to define it. We define an animation to start at maximum speed, then slow down to half speed, and finally speed up to the end
public class PointViewInterpolator implements Interpolator {
@Override
public float getInterpolation(float t) {
floatX = 2.0 f * t - 1;return0.5 f * (* * x x x + 1.0 f); }}Copy the codeDon’t forget to add this sentence:
valueAnimator.setInterpolator(new PointViewInterpolator());
Copy the codeThen run it again and it will have the effect above. Interpolator and TypeEvaluator are discussed. Welcome criticism and correction if there are fallacies. Interpolator will Interpolator and TypeEvaluator will work together, and will Interpolator and TypeEvaluator will Interpolator and TypeEvaluator will work together.