Android property Animation

Android property Animation
Property Animation

The core of attribute animation is ObjectAnimator and ValueAnimator. The following describes how to use each method.

Use of ObjectAnimator:

I. Use of a single Animation:

Y axis rotation from 0 degrees to 360 degrees

ObjectAnimator    .ofFloat(imageView,"rotationY",0,360)     .setDuration(1000)    .start();

X axis rotation from 0 degrees to 360 degrees

ObjectAnimator    .ofFloat(imageView,"rotationX",0,360)     .setDuration(1000)    .start();

The width ranges from the original length to 1.5 times.

ObjectAnimator    .ofFloat(imageView,"scaleX",1f,1.5f)     .setDuration(1000)    .start();

Height from original length to 1.5 times length

ObjectAnimator    .ofFloat(imageView,"scaleY",1f,1.5f)     .setDuration(1000)    .start();

Move from the original position to the 100px position relative to the original position in the positive direction of the X axis

ObjectAnimator    .ofFloat(imageView,"translationX",0,100)     .setDuration(1000)    .start();

Move from the original position to the 100px position relative to the original position in the positive direction of the Y axis

ObjectAnimator    .ofFloat(imageView,"translationY",0,100)     .setDuration(1000)    .start();

Transparency from transparent to completely transparent

ObjectAnimator    .ofFloat(imageView,"alpha",1,0)     .setDuration(1000)    .start();

The ObjectAnimator. ofArgb () method is used to change the background color of textView.

int startColor = 0xffff0000;int endColor = 0xff00ff00;ObjectAnimator.ofArgb(textView,"backgroundColor",startColor,endColor).setDuration(1000).start();

Ii. Use of mixed Animation:A mixed View animation mainly uses PropertyValuesHolder. If you want to combine scaleX and scaleY, You need to construct two corresponding PropertyValuesHolder objects and call ObjectAnimator. ofPropertyValuesHolder, as follows:

PropertyValuesHolder propertyValuesHolder1 = PropertyValuesHolder.ofFloat( "scaleX", 1f, 1.5f);PropertyValuesHolder propertyValuesHolder2 = PropertyValuesHolder.ofFloat("scaleY", 1f, 1.5f);ObjectAnimator.ofPropertyValuesHolder(imageView,propertyValuesHolder1,propertyValuesHolder2).setDuration(3000).start();

Use of AnimatorSet

ObjectAnimator animator1 = ObjectAnimator. ofFloat (imageView, "scaleX", 1f, 4f, 1f); ObjectAnimator animator2 = ObjectAnimator. ofFloat (imageView, "scaleY", 1f, 4f, 1f); AnimatorSet animSet = new AnimatorSet (); // animSet. play (animator1 ). with (animator2); // execute animSet together. play (animator1 ). after (animator2); // after animator1 is executed, execute // animSet. play (animator1 ). before (animator2); // animator1 is executed before animator2 // animSet. playTogether (animator1, animator2); // execute animSet together. setDuration (2000); animSet. start ();

The values of the two attributes change with Path (which must be used in API Level 21 or later versions)

Path path = new Path (); // This is a rectangular Path. The first four values are left, top, right, and bottom values, the last parameter indicates the animation direction (CW indicates clockwise and CCW indicates clockwise ). Path. addRect (10,10, 300,300, Path. direction. CW); ObjectAnimator. ofFloat (imageView, "translationX", "translationY", path ). setDuration (3000 ). start ();

3. Custom property Animation:Use the following API to implement custom property Animation

ofFloat(T target, Property
  
    property, float... values)
  

Instance:
Custom CircleView:

public class CircleView extends View {    private Paint paint;    private float radius;    public float getRadius() {        return radius;    }    public void setRadius(float radius) {        this.radius = radius;    public CircleView(Context context) {        super(context);    }    public CircleView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public CircleView(Context context, AttributeSet attrs, int       defStyleAttr) {        super(context, attrs, defStyleAttr);    }    @Override    protected void onDraw(Canvas canvas) {        if (paint == null) {            paint = new Paint();            paint.setColor(getResources().getColor(            android.R.color.holo_red_light));        }        canvas.drawCircle(getWidth()/2, getHeight()/2, radius,             paint);    }}

Animation Execution Code:

Property property = new Property
  
   (Float.class, "radius") {    @Override     public Float get(CircleView object) {         return object.getRadius();     }    @Override     public void set(CircleView object, Float value) {                      object.setRadius(value);     }};ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(circleView, property, 10f,100f,10f);objectAnimator.setRepeatCount(10);objectAnimator.addUpdateListener(new  ValueAnimator.AnimatorUpdateListener() {    @Override    public void onAnimationUpdate(ValueAnimator animation) {                  circleView.invalidate();    }});objectAnimator.setDuration(2000);objectAnimator.start();
  

Xml layout:

Instance effect:

Use of ValueAnimator

The ValueAnimator class is the parent class of the ObjectAnimator class we mentioned above. After reading the source code, we can find that the ObjectAnimator animation is finally implemented through ValueAnimation. The following describes the use of ValueAnimator.

For a single value change, imageView moves from 1 to 100 along the X axis. In fact, changing ValueAnimator to ObjectAnimator is the same effect because ObjectAnimator is a subclass of ValueAnimator.

ValueAnimator valueAnimator = ValueAnimator.ofFloat(1,100);valueAnimator.setDuration(1000);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {     @Override      public void onAnimationUpdate(ValueAnimator animation) {          imageView.setTranslationX((Float) animation.getAnimatedValue());     } });valueAnimator.start();

Multiple value changes

PropertyValuesHolder property1 = PropertyValuesHolder.ofFloat("value1", 1,100);PropertyValuesHolder property2 = PropertyValuesHolder.ofFloat("value2", 100, 200);ValueAnimator valueAnimator = ValueAnimator    .ofPropertyValuesHolder(property1, property2);valueAnimator.setDuration(1000);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {   @Override    public void onAnimationUpdate(ValueAnimator animation) {        float value1 = (float) animation.getAnimatedValue("value1");        float value2 = (float) animation.getAnimatedValue("value2");        imageView.setTranslationX(value1);        imageView.setTranslationY(value2);    }});valueAnimator.start();

Use setEvaluator (TypeEvaluator value) to calculate the AnimatedValue to achieve advanced animation effects.
Example: an animation scenario commonly used by e-commerce apps to add a product to the shopping cart, and the product curve is dropped into the purchased car.
Source Code address: https://github.com/heheLT/AnimationBall
:

Main Code:

/*** Second-order Bell curve, which is determined by three points */public void paoWuXian (final int [] startLocation, final int [] endLocation, final ViewanimalView, final View endView) {final float [] middle = new float [2]; middle [0] = endLocation [0]; // x of the center point, you can also set other values to middle [1] = startLocation [1]; // y of the center point. You can also set other values to ValueAnimator valueAnimator = new ValueAnimator (); valueAnimator. setDuration (1000); valueAnimator. setObjectValues (new PointF (endLocation [0], endLocation [1]); valueAnimator. setInterpolator (new AccelerateDecelerateInterpolator (); valueAnimator. setEvaluator (new TypeEvaluator
  
   
() {@ Override public PointF evaluate (float fraction, PointF startValue, PointF endValue) {PointF point = new PointF (); // The second-order besell curve formula is used to calculate x, y point. x = (1-fraction) * (1-fraction) * startLocation [0] + 2 * fraction * (1-fraction) * middle [0] + fraction * endLocation [0]; point. y = (1-fraction) * (1-fraction) * startLocation [1] + 2 * fraction * (1-fraction) * middle [1] + fraction * endLocation [1]; return point ;}}); valueAnimator. start (); valueAnimator. addUpdateListener (new ValueAnimator. animatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {PointF point = (PointF) animation. getAnimatedValue (); animalView. setX (point. x); animalView. setY (point. y) ;}}); valueAnimator. addListener (new ValueAnimator. animatorListener () {@ Override public void onAnimationStart (Animator animation) {}@ Override public void onAnimationEnd (Animator animation) {// After the parabolic animation ends, scale the animation ValueAnimator valueAnimator = new ValueAnimator (); valueAnimator. setDuration (400); valueAnimator. setInterpolator (new AccelerateDecelerateInterpolator (); valueAnimator. setObjectValues (1.0f, 0.8f); valueAnimator. addUpdateListener (new ValueAnimator. animatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {float value = (float) animation. getAnimatedValue (); if (value> 0.9) {endView. setScaleX (value); endView. setScaleY (value);} else {endView. setScaleX (1.8f-value); endView. setScaleY (1.8f-value) ;}}); valueAnimator. start () ;}@ Override public void onAnimationCancel (Animator animation) {}@ Override public void onAnimationRepeat (Animator animation ){}});}
  

ValueAnimator summary:

ValueAnimator is actually an auxiliary class for controlling value changes. We set the starting point, endpoint, and time for the changes. In this way, ValueAnimator provides a listener interface for value changes, so that we can get the changed value, then set it to the View to form an animation. We can use setEvaluator (TypeEvaluator value) to calculate the value of AnimatedValue and implement Custom Animation.