Android: attribute animation details

Android: attribute animation details

(1) Introduction

Property animation is a new function provided by Android 3.0 to facilitate the smooth transition of any element ". As we all know, the supplementary animations provided by Android, such as AlphaAnimation and TranslateAnimation, can only be applied to the View, and there is almost no extensibility. In addition, it is a pity that the original animation cannot achieve the color gradient effect.

Property animations completely break this design approach. Instead of placing these animations forcibly on the View, they only generate a series of values that developers can use on their own. For example, property animation can generate 1 ~ 0 smooth transition values. Apply these values to the alpha of the View to achieve transparency gradient.

Meanwhile, attribute animation can be used to directly change the attributes of a View. For example, continuous setTranslationX enables horizontal translation.

(2) code demonstration

1. ValueAnimator: generate a value for smooth transition within a certain range.

 

// Property animation, 0 ~ 1 gradient public void simpleValueAnimator (View view) {ValueAnimator anim = ValueAnimator. ofFloat (0f, 1f); anim. setDuration (300); // the anim listening for the animation process. addUpdateListener (new ValueAnimator. animatorUpdateListener () {@ Override public void onAnimationUpdate (ValueAnimator animation) {// The callback method executes float currentValue = (float) animation in the main thread. getAnimatedValue (); Log. d (TAG, "current value is" + currentValue) ;}}); anim. start ();}

(1) This method can achieve a more complex "smooth transition" by setting multiple values, for example, implementing 0 ~ 5 ~ 3 ~ 10 transition effect:

ValueAnimator anim = ValueAnimator.ofFloat(0f, 5f, 3f, 10f);

(2) set the startup latency, repeat times, and repetition mode:

 

 

// Set the startup latency anim. setStartDelay (1000); // you can set the number of repetitions (or an unlimited number of times) anim. setRepeatCount (3); // set the recurrence mode: Re-execute the animation (you can also set it to reverse) anim. setRepeatMode (ValueAnimator. RESTART );

(3) Listen to the starting, ending, and repeating statuses of the animation:

 

 

// Listen to the animation status (start/end/Repeat/cancel) anim. addListener (new AnimatorListenerAdapter () {@ Override public void onAnimationStart (Animator animation) {super. onAnimationStart (animation); Log. d (TAG, "onAnimationStart") ;}@ Override public void onAnimationRepeat (Animator animation) {super. onAnimationRepeat (animation); Log. d (TAG, "onAnimationRepeat") ;}@ Override public void onAnimationEnd (Animator animation) {super. onAnimationEnd (animation); Log. d (TAG, "onAnimationEnd ");}});

2. ObjectAnimator: smoothly changing the attribute values of any object.

 

(1) smooth change of the opacity of TextView:

 

Public void changeAlphaValue (View view) {TextView textView = (TextView) findViewById (R. id. main_text1); // ObjectAnimator inherits from ValueAnimator // animator and calls the setAlpha method of textView. If this method does not exist, a warning exception occurs. ObjectAnimator animator = ObjectAnimator. ofFloat (textView, "alpha", 1f, 0f, 1f); animator. setDuration (3000); animator. start ();}

This animation does not directly change the alpha attribute of textView (in fact, textView even its parent component does not have the alpha attribute). Instead, it calls the setAlpha method of textView and passes in 1 ~ 0 ~ 1. The smooth gradient value is used as a parameter to achieve the opacity gradient effect.

 

Similarly, the rotation and translation effects can be achieved by passing the rotation and translationX (translationY) parameters.

3. Use AnimatorSet to combine various animations:

 

Public void animatorSet (View view) {TextView textView = (TextView) findViewById (R. id. main_text1); ObjectAnimator moveIn = ObjectAnimator. ofFloat (textView, "translationX",-500f, 0f); ObjectAnimator rotate = ObjectAnimator. ofFloat (textView, "rotation", 0f, 360f); ObjectAnimator fadeInOut = ObjectAnimator. ofFloat (textView, "alpha", 1f, 0.2f, 1f); // First Pan, then perform alpha gradient AnimatorSet animSet = new AnimatorSet (); animSet while rotating. play (rotate ). with (fadeInOut ). after (moveIn); animSet. setDuration (5000); animSet. start ();}

AnimSet. play will generate an Animator. Builder object, and then you can use with, after, before and other methods for animation superposition.

 

4. Customize the Evaluator to implement a "smooth transition" between any two objects ".

The ofInt and ofFloat methods of ValueAnimator are nothing more than a number that produces a smooth transition. However, ValueAnimator also has an ofObject method to implement a smooth transition between two objects. Obviously, the system cannot know how to transition, so we need to specify it.

For example, a class is defined to represent the coordinates of a vertex:

 

public class PointBean {    private float x;    private float y;    public PointBean(float x, float y) {        this.x = x;        this.y = y;    }    public float getX() {        return x;    }    public void setX(float x) {        this.x = x;    }    public float getY() {        return y;    }    public void setY(float y) {        this.y = y;    }}

Then, if we want to implement a smooth transition between two points (through which we can implement the View translation), we need to define how the transition between the two pointbeans. Of course, the implementation here is very simple:

 

 

public class PointEvaluator implements TypeEvaluator
 
   {    @Override    public PointBean evaluate(float fraction, PointBean startValue, PointBean endValue) {        float x = startValue.getX() + fraction * (endValue.getX() - startValue.getX());        float y = startValue.getY() + fraction * (endValue.getY() - startValue.getY());        return new PointBean(x, y);    }}
 

The fraction parameter indicates the animation completion (0.0 ~ A value of 1.0), startValue indicates the start point, endValue indicates the end point, this method needs to return the result of transition from startValue to endValue, the completion ratio is fraction.
Then, the translation effect is achieved through the transition of two pointbeans (here it is only a schematic, you can directly use ObjectAnimator in actual scenarios ):

 

 

ValueAnimator animator = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);        animator.setDuration(2000);        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                PointBean current = (PointBean) animation.getAnimatedValue();                imageView.setTranslationX(current.getX());                imageView.setTranslationY(current.getY());            }        });        animator.start();

5. Achieve color gradient

 

Similar to the preceding content, red ~ Green ~ Blue gradient:

 

ValueAnimator animator = ValueAnimator.ofObject(new ColorEvaluator(), "#ffff0000", "#ff00ff00", "#ff0000ff");        animator.setDuration(5000);        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                String currentColor = (String) animation.getAnimatedValue();                textView.setBackgroundColor(Color.parseColor(currentColor));            }        });        animator.start();

Obviously, the focus here is ColorEvaluator, which specifies how the color value is gradient. For example, how does # ffff0000 transition to # ff00ff00.

Public class ColorEvaluator implements TypeEvaluator
 
  
{// Only supports the asynchronous rggbb mode @ Override public String evaluate (float fraction, String startValue, String endValue) {if (! StartValue. startsWith ("#") |! EndValue. startsWith ("#") {throw new IllegalArgumentException ("color must started with '#'.");} if (startValue. length ()! = 9 | endValue. length ()! = 9) {throw new IllegalArgumentException ("startValue and endValue must be '# 1_rggbb '. ");} int start_a, start_r, start_g, start_ B; int end_a, end_r, end_g, end_ B; // start start_a = getIntValue (startValue, 1, 3 ); start_r = getIntValue (startValue, 3, 5); start_g = getIntValue (startValue, 5, 7); start_ B = getIntValue (startValue, 7, 9 ); // end end_a = getIntValue (endValue, 1, 3); end_r = getIntValue (endValue, 3, 5); end_g = getIntValue (endValue, 5, 7 ); end_ B = getIntValue (endValue, 7, 9); return "#" + getHexString (int) (start_a + fraction * (end_a-start_a) + getHexString (int) (start_r + fraction * (end_r-start_r) + getHexString (int) (start_g + fraction * (end_g-start_g) + getHexString (int) (start_ B + fraction * (end_ B-start_ B);} // extract from the specified position in the original # AARRGGBB color value and convert it to int. private int getIntValue (String hexValue, int start, int end) {return Integer. parseInt (hexValue. substring (start, end), 16);} private String getHexString (int value) {String a = Integer. toHexString (value); if (. length () = 1) {a = "0" + a;} return ;}}
 

6. Set the Interpolator to control the animation speed, such as constant speed, gradual acceleration, gradual deceleration, or first acceleration and then deceleration. This is similar to traditional animations. Similarly, you can customize the implementation of Interpolator.

 

 

Anim. setInterpolator (new AccelerateInterpolator (); // gradually accelerated Animation

7. ViewPropertyAnimator: a convenient way to set the animation effect for the View by using property animation.

 

 

testImageView.animate().setDuration(2000).alpha(0.3f).rotationBy(360).yBy(160);

The code above indicates to gradient the opacity of testImageView to 0.3, rotate 360 degrees, and move 160px down.

 

The methods here have two forms. For example, rotation (360) indicates the rotation to a position of 360 degrees (regardless of the initial state, it is rotated to 360 degrees ), rotationBy (360) indicates that the rotation is 360 degrees (if the starting position is not 0 degrees, it is still not 0 degrees at the end ).