Full explanation of Property Animation in Android Research

Full explanation of Property Animation in Android Research
??

In the previous Android study, the full explanation of Property Animation shows the core usage of Property Animation:

ObjectAnimator implements animation, ValueAnimator implements animation, and the use of AnimatorSet ~

Of course, attribute animation also has some knowledge points, which can also make very good results. This blog will show you ~

1. How to use an xml file to create an attribute Animation

Everyone knows that View Animator and Drawable Animator can all create animations in the anim folder and use them in the program, or even set them as attribute values in Theme. Of course, attribute animation can also be declared in the file:

First, create the animator folder under res, and then create res/animator/scalex. xml

1 2 3 4 5 6 7 8

Code:

1 2 3 4 5 6 7

Public void scaleX (View view) {// load the animation Animator anim = AnimatorInflater. loadAnimator (this, R. animator. scalex); anim. setTarget (mMv); anim. start ();}

Use AnimatorInflater to load the animation resource file and set the target. OK ~~ Isn't it easy? It's just a single horizontal magnification ~

What if I want to scale both vertically and horizontally? Then how can we define the property file:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

When the set tag is used, there is an orderring attribute set to together, and [there is another value: sequentially (indicating one execution after another )].

In the previous blog, I ignored an effect, that is, scaling and reversal all have center points or axes. By default, the center scaling and the center symmetric line are inverted lines, so I decided this horizontal line, vertically narrow down to the center in the upper left corner:

Code:

1 2 3 4 5 6 7 8

// Load the animation Animator anim = AnimatorInflater. loadAnimator (this, R. animator. scale); mMv. set0000tx (0); mMv. setequalty (0); // The displayed call invalidate mMv. invalidate (); anim. setTarget (mMv); anim. start ();

It is very simple. You can directly set Tx and Ty for the View, and then call invalidate.

See the following:

Well, by writing xml declaration animations, using set nested set and combining orderring attributes, you can basically implement any animation ~~ The above also demonstrates the lifecycle settings.

2. Layout Animations)

LayoutTransition is mainly used to set an animation for the layout container. When the view hierarchy in the container changes, there is a transitional animation effect.

The basic code is:

1 2 3 4 5 6 7 8 9 10

LayoutTransition transition = new LayoutTransition (); transition. setAnimator (LayoutTransition. CHANGE_APPEARING, transition. getAnimator (LayoutTransition. CHANGE_APPEARING); transition. setAnimator (LayoutTransition. APPEARING, null); transition. setAnimator (LayoutTransition. DISAPPEARING, null); transition. setAnimator (LayoutTransition. CHANGE_DISAPPEARING, null); mGridLayout. setLayoutTransition (transition );

 

There are four types of transition:

LayoutTransition. APPEARING when a View appears in the ViewGroupThis ViewSet Animation

LayoutTransition. CHANGE_APPEARING when a View appears in the ViewGroup, this View affects other View locations.Other viewsSet Animation

LayoutTransition. DISAPPEARINGThis ViewSet Animation

LayoutTransition. CHANGE_DISAPPEARING when a View is lost in the ViewGroup, this View has an impact on other View locations.Other viewsSet Animation

LayoutTransition. CHANGE does not affect the positions of other views due to the appearance or disappearance of views, and then the animations set for other views.

Pay attention to who the animation is set on. This View is another View.

Now let's take a comprehensive example:

Layout file:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 28 29 30 31 32 33 34 35 36 38 39 40 41 42

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 28 29 30 31 32 33 34 35 36 38 39 40 41 42 43 44 45 46 48 49 50 51 52 54 55 57 58 59 60 61 62 63 64 65 66 67 68 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 90 91 92 93 94 95 96 97 98 99 100

Package com. example. zhy_property_animation; import android. animation. layoutTransition; import android. app. activity; import android. OS. bundle; import android. view. view; import android. view. view. onClickListener; import android. view. viewGroup; import android. widget. button; import android. widget. checkBox; import android. widget. compoundButton; import android. widget. compoundButton. onCheckedChangeListener; Import android. widget. gridLayout; public class LayoutAnimaActivity extends Activity implements extends {private ViewGroup viewGroup; private GridLayout mGridLayout; private int mVal; private LayoutTransition mTransition; private CheckBox mAppear, callback, mDisAppear; @ Override public void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceS Tate); setContentView (R. layout. layout_animator); viewGroup = (ViewGroup) findViewById (R. id. id_container); mAppear = (CheckBox) findViewById (R. id. id_appear); mChangeAppear = (CheckBox) findViewById (R. id. id_change_appear); mDisAppear = (CheckBox) findViewById (R. id. id_disappear); mChangeDisAppear = (CheckBox) findViewById (R. id. id_change_disappear); mAppear. setOnCheckedChangeListener (this); mChangeApp Ear. setOnCheckedChangeListener (this); mDisAppear. setOnCheckedChangeListener (this); mChangeDisAppear. setOnCheckedChangeListener (this); // create a GridLayout mGridLayout = new GridLayout (this); // set five buttons for each column. setColumnCount (5); // Add to viewGroup in layout. addView (mGridLayout); // all default animations enable mTransition = new LayoutTransition (); mGridLayout. setLayoutTransition (mTransition);}/*** Add button ** @ param view */ Public void addBtn (View view) {final Button button = new Button (this); button. setText (++ mVal) +); mGridLayout. addView (button, Math. min (1, mGridLayout. getChildCount (); button. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {mGridLayout. removeView (button) ;}}) ;}@ Override public void onCheckedChanged (CompoundButton buttonView, boolean isChecked) {mTransition = New LayoutTransition (); mTransition. setAnimator (LayoutTransition. APPEARING, (mAppear. isChecked ()? MTransition. getAnimator (LayoutTransition. APPEARING): null); mTransition. setAnimator (LayoutTransition. CHANGE_APPEARING, (mChangeAppear. isChecked ()? MTransition. getAnimator (LayoutTransition. CHANGE_APPEARING): null); mTransition. setAnimator (LayoutTransition. DISAPPEARING, (mDisAppear. isChecked ()? MTransition. getAnimator (LayoutTransition. DISAPPEARING): null); mTransition. setAnimator (LayoutTransition. CHANGE_DISAPPEARING, (mChangeDisAppear. isChecked ()? MTransition. getAnimator (LayoutTransition. CHANGE_DISAPPEARING): null); mGridLayout. setLayoutTransition (mTransition );}}

:

The animation is a little long. Be patient. Be sure to check whether the animation is set for the current View or other Views.

Of course, animations support custom settings and time settings. For example, if we modify the settings, the added animation is:

1 2 3

MTransition. setAnimator (LayoutTransition. APPEARING, (mAppear. isChecked ()? ObjectAnimator. ofFloat (this, scaleX, 0, 1): null ));

The result is:

The original fade-in changes to the effect of enlarging the width from the center ~~ Isn't it good ~~

3. View anim Method

In SDK11, the animation method is added to the View to facilitate animation.

Layout file:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 28 29 30 31 32 33 34

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 28 29 30 31 32 33 34 35 36 38 39 40 41 42 43 44 45 46 48 49 50 51 52 53 54 56 57 58 59 60 61 62 63 64 65

Package com. example. zhy_property_animation; import android. animation. objectAnimator; import android. animation. propertyValuesHolder; import android. app. activity; import android. OS. bundle; import android. util. displayMetrics; import android. util. log; import android. view. view; import android. widget. imageView; public class ViewAnimateActivity extends Activity {protected static final String TAG = ViewAnimateActivity; private ImageView mBlueBall; private float mScreenHeight; @ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. view_animator); DisplayMetrics outMetrics = new DisplayMetrics (); getWindowManager (). getdefadisplay display (). getMetrics (outMetrics); mScreenHeight = outMetrics. heightPixels; mBlueBall = (ImageView) findViewById (R. id. id_ball);} public void viewAnim (View view) {// need API12 mBlueBall. animate ()//. alpha (0 )//. y (mScreenHeight/2 ). setDuration (1000) // need API 12. withStartAction (new Runnable () {@ Override public void run () {Log. e (TAG, START);} // need API 16 }). withenderson action (new Runnable () {@ Override public void run () {Log. e (TAG, END); runOnUiThread (new Runnable () {@ Override public void run () {mBlueBall. setY (0); mBlueBall. setAlpha (1.0f );}});}}). start ();}}

Simply use mBlueBall. animate (). alpha (0). y (mScreenHeight/2). setDuration (1000). start () to implement animation ~~ However, SDK11 is required. In SDK12 and SDK16, withStartAction and withenderson action are added respectively to perform operations before and after the animation. Of course, you can also perform operations such as. setListener.

Using ObjectAnimator to implement the above changes, we can use: PropertyValueHolder

1 2 3 4 5

PropertyValuesHolder pvhX = PropertyValuesHolder. ofFloat (alpha, 1f, 0f, 1f); PropertyValuesHolder pvhY = PropertyValuesHolder. ofFloat (y, 0, mScreenHeight/2, 0); ObjectAnimator. ofPropertyValuesHolder (mBlueBall, pvhX, pvhY ). setDuration (1000 ). start ();

The effect is the same as above.

Running result:

All right, the usage of attribute animation ends here ~~~~ You are welcome to study and make progress together.