Android property animation and Android Animation

Android property animation and Android Animation

Reprinted please indicate the source: http://blog.csdn.net/h28496/44338669

Zheng Haipeng, North University of China

Principles of property Animation

You can set a View attribute to make it animated.For example, if you constantly set the x value of a Button, the button will be moved on the Y axis.

If you have learned how to create flash or other animations, you should be able to understand the meaning of "compensation animation. Property animation is similar to the compensation animation on the property.

Set the initial value and end value of a View. The property animation gradually changes the attribute of the View from the initial value to the end value as time changes.

Attribute animation Conditions

According to the principle of property animation, to implement an animation in a certain aspect, the View must first have this attribute. That is,You must have the set attribute name () and get attribute name () methods.

For example, setWidth () and getWidth ().

Note: The getWidth () and setWidth () of the button are ineffective here. Recall how to set the width of a button in the code?

Set the width in the Code:

button.getLayoutParams().width = 100;

It corresponds to

android:layout_width

Instead

android:width

I don't think width is useful ...... I have read other blogs written by Daniel and I am not quite sure about android: width.

A simple example

Effect: After clicking the Button, flip by the X axis. The layout file of the Button is common and is not pasted.

public void onClick(View view) {ObjectAnimator.ofFloat(view, "rotationX", 0f, 360f).setDuration(1000).start();}

Explanation: Because the Button class has the setRotationX (float p) method, the second parameter "rotationX" in the third row is valid. If you write a non-existent parameter or the set parameter is irrelevant to the screen, the screen is not animated.

In addition, because the parameter type of setRotationX (float p) is float, the third row uses ofFloat (...) instead of ofInt (...) or other.

SetDuration (int p) is the animation duration, in milliseconds.

When I read the blog written by Ren yugang, he wrote that without the set attribute name () method, the program will crash. But I did not crash during the test, but I reported an error in logcat and the program continued to run.

What if the conditions are not met?

What if you want to set an animation for a View but it does not have the corresponding method for setting attributes? For example:

We want to set an animation to gradually increase the width of the button, but the setWidth () of the button cannot be set to the display width.

Solution:

① Add the set property () and get property () methods. (unless it is your custom control, you generally do not have the permission to do so. We will not discuss this situation below)

② Use a class to wrap the original object and indirectly provide the get and set methods;

③ Use ValueAnimation to obtain the attribute value at each time point, and then use the AnimatorUpdateListener to set the View status based on the obtained attribute value.

Wrap original object

It is common to use this method to add a class without a certain method. Considering polymorphism, packaging is usually much better than inheritance.

The following is an example of using MyView to wrap a View:

Class MyView {View view; public MyView (View view) {this. view = view;} public int getWidth () {return view. getLayoutParams (). width;} public void setWidth (int width) {this. view. getLayoutParams (). width = width; this. view. requestLayout (); // This sentence is used to reset the view position }}

With the packaging class, let's implement an animation that changes the width of a Button (which inherits from the View.

Effect: within 300 milliseconds, the view width is first changed to 4 times and then restored to the original format.

Public void onClick (View v) {MyView view = new MyView (v); // wrap int startWidth = v first. getWidth (); ObjectAnimator. ofInt (view, "width", startWidth, startWidth * 4, startWidth ). setDuration (300 ). start ();}

Implement it by yourself using ValueAnimator and AnimatorUpdateListener

Effect: within one second, the view is moved from y = 0 to y = 500.

public void onClick(final View view){final ValueAnimator anim = ValueAnimator.ofFloat(0, 500);anim.setDuration(1000);anim.start();anim.addUpdateListener(new AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float value = (Float) animation.getAnimatedValue();view.setTranslationY(value);}});}

First define a value animation (ValueAnimator, which can be translated by a Chinese name ). It can be seen from the name that it is only a "value" Change and does not involve a specific view.
Then, you can set a listener for this value animation. Each time the value changes, it is applied to the attribute of the view. For example, each time the value changes, you must reset the position.

Although it seems a little troublesome, it is more flexible.

Multiple animations are executed simultaneously.

In the above three examples, the animation is separate. What if I want to change its transparency while moving it?

①Similar to the above, you canUse AnimatorUpdateListener;

② Use PropertyValuesHolder;

③ Use AnimatorSet.

Implementation Using AnimatorUpdateListener

In the previous example, only the view position is set, but you can set multiple attributes of the view to that value at the same time. You only need to add a few more. set attributes ();

To avoid duplication, ValueAnimator is not used, but ObjectAnimator is used.

Effect: within 1 second, the clicked view is reduced first, and the color is reduced to none, and then restored to its original state. (We recommend that you use an ImageView instead of a Button for better results)

public void onClick(final View v){ObjectAnimator anim = ObjectAnimator.ofFloat(v, "", 1, 0, 1).setDuration(1000);anim.start();anim.addUpdateListener(new AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float currentValue = (Float) animation.getAnimatedValue();v.setScaleX(currentValue);v.setScaleY(currentValue);v.setAlpha(currentValue);}});}

Like ObjectAnimator and ValueAnimator, listeners can also be added.

Using PropertyValuesHolder

The code for this implementation method is concise and easy to understand.

Effect: within 1 second, the clicked view becomes smaller, the color fades to none, and then restores to its original state. The view rotates 360 degrees throughout the process. (We recommend that you use an ImageView instead of a Button for better results)

public void onClick(View view){PropertyValuesHolder x = PropertyValuesHolder.ofFloat("scaleX", 1, 0, 1);PropertyValuesHolder y = PropertyValuesHolder.ofFloat("scaleY", 1, 0, 1);PropertyValuesHolder alpha = PropertyValuesHolder.ofFloat("alpha", 1, 0, 1);PropertyValuesHolder rotation = PropertyValuesHolder.ofFloat("rotation", 0, 360);ObjectAnimator.ofPropertyValuesHolder(view, x, y, alpha, rotation).setDuration(1000).start();}

Implementation Using AnimatorSet

It can be seen from the name that this is an animation set. AnimatorSet allows multiple animationsRun simultaneously and successively.

Run simultaneously

Effect: When the clicked view increases in the X direction, the Y direction also increases, and then decreases at the same time (we recommend that you use an ImageView instead of a Button to achieve better results)

Public void togetherRun (View view) {// It feels similar to PropertyValuesHolder ObjectAnimator x = ObjectAnimator. ofFloat (view, "scaleX", 1, 2, 1); ObjectAnimator y = ObjectAnimator. ofFloat (view, "scaleY", 1, 2, 1); AnimatorSet animSet = new AnimatorSet (); animSet. setDuration (1000); animSet. playTogether (x, y); animSet. start ();}

PlayTogether (Animator... items) allowsMultipleThe animation is executed simultaneously. In addition, playWidth (Animator item) allowsTwoThe animation is executed simultaneously.

Run successively

Effect: The clicked view becomes larger and smaller in the direction of X and y, and then moves horizontally to the right and returns the result (we recommend that you use an ImageView instead of a Button for better results)

Public void playAfter (View view) {ObjectAnimator scaleX = ObjectAnimator. ofFloat (ball, "scaleX", 1, 2, 1); ObjectAnimator scaleY = ObjectAnimator. ofFloat (ball, "scaleY", 1, 2, 1); ObjectAnimator x = ObjectAnimator. ofFloat (ball, "x", ball. getX (), ball. getX () + 200, ball. getX (); AnimatorSet animSet = new AnimatorSet (); // supports chained programming animSet. play (scaleX ). with (scaleY); animSet. play (x ). after (scaleY); animSet. setDuration (1000); animSet. start ();}}

You can also call animSet. play (x). after to delay the playing of the next animation.

Here, animSet. play (x). after (scaleY) is used; that is, play again after playing another animation. You can also use

animSet.play(x).before(anim1); 

Play one animation before another.

How to listen to the animation end

Animation has three listeners:

① AnimatorUpdateListener (listener for data or other situations during animation execution)

② AnimatorListener (Listening to the 'lifecycle' of an animation ')

③ AnimatorPauseListener (listener for animation pause and restoration)

Sometimes we need to do something after the animation ends, for example, jump to another Activity after clicking a button.

In this case, we only need to add an AnimatorListener listener to the animation.

Anim. addListener (new AnimatorListener () {@ Overridepublic void onAnimationStart (Animator animation) {// TODO Auto-generated method stub} @ Overridepublic void onAnimationRepeat (Animator animation) {// TODO Auto-generated method stub} @ Overridepublic void onAnimationEnd (Animator animation) {// TODO Auto-generated method stub // what to do after the animation is added here} @ Overridepublic void onAnimationCancel (Animator animation) {// TODO Auto-generated method stub }});

As shown above, the animation has four states. Sometimes we don't need to implement all the methods. We only need one of them. We can use the AnimatorListenerAdapter, which inherits the AnimatorListener interface. Null implements all methods.

Example:

anim.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {view.setY(startY);}});

The property animation of Android is basically finished.

References:

Http://blog.csdn.net/lmj623565791/article/details/38067475

Http://blog.csdn.net/singwhatiwanna/article/details/17841165