An advanced instance of a property animation propertyanimation in Android _android

0, the basic review
propertyanimation, property animation, as the name implies is the use of object property changes to form the effect of animation. The class of the property animation can be represented by animator this abstract class, usually using its subclasses: Animatorset and Valueanimator, At the same time Valueanimator has two subclasses, respectively, Objectaniamtor and Timeanimator. The
defines an XML resource for a property animation can usually be one of the following three elements as the root element:
<set> element: The resource element represents the Aniamtorset class, and this class can contain <set>,< Objectaniamtor>,<animator> three child elements.
<objectAnimator> elements: Used to define the Objectaniamtor class.
<animator> elements: Used to define the Valueanimator class.
For example, here A resource file is defined as follows:

<set android:ordering= "[together|sequentially]" >
 
  <objectanimator
 
      android:propertyname= "string"
      android:duration= "int"
      android:valuefrom= "Float|int|color"
      android:valueto= "Float|int|color"
      android:startoffset= "int"
      android:repeatcount= "int"
      android:interpolator= "
      android:repeatmode=" [ Reapeat|reverse] "
      android:valuetype=" [Inttype|floattype] "/>
  
  <animator 
      
      android:duration=" int "
      android:valuefrom=" Float|int|color "
      android:valueto=" Float|int|color "
      android:startoffset= "int"
      android:repeatcount= "int"
      android:interpolator= ""
      android:repeatmode= "[Reapeat|reverse]"
      android:valuetype= "[Inttype|floattype]"/>
 
  <set> ...
    .
  </set>
 
</set>

Property files are usually saved under the animator folder.

1. How to use an XML file to create a property animation
It's certainly clear that View animator, drawable animator can create animations under the Anim folder, and then use them in your programs, and even set them to property values in theme. Of course, a property animation can actually be declared in a file:
First establish the animator folder under Res and then build the Res/animator/scalex.xml

<?xml version= "1.0" encoding= "Utf-8"?> <objectanimator xmlns:android= 
"http://schemas.android.com/apk" /res/android " 
  android:duration=" 1000 " 
  android:propertyname= 
  " ScaleX "android:valuefrom=" 1.0 " Android:valueto= "2.0" 
  android:valuetype= "Floattype" > 
</objectAnimator> 

Code:

public void ScaleX (view view) 
  { 
    //Load animation 
    Animator Anim = Animatorinflater.loadanimator (This, R.animator.scalex); 
    Anim.settarget (mMv); 
    Anim.start (); 
  } 

Using Animatorinflater to load the animated resource file, and then set the target, the ok~~ is not very simple, this is just a horizontal amplification of a single times ~
What if I want to scale both vertically and horizontally? You can define the properties file:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android= 
"http://schemas.android.com/apk/res/" Android " 
  android:ordering=" together > 
 
  <objectanimator 
    android:duration= "1000" 
    android: Propertyname= "ScaleX" 
    android:valuefrom= "1" 
    android:valueto= "0.5" > 
  </objectAnimator> 
  <objectanimator 
    android:duration= "1000" 
    android:propertyname= "ScaleY" 
    android:valuefrom= "1" 
    android:valueto= "0.5" > 
  </objectAnimator> 
 
</set> 

With the set label, there is a orderring property set to together, "there is another value: sequentially (indicates one after another)".
The previous blog overlooked an effect, that is, scaling, reversing, and so have a central point or axis, the default center scale, and the middle symmetry line for the inverted line, so I decided this landscape, vertical narrowing to the upper left corner as the center point:
Code:

Load Animation 
    Animator Anim = Animatorinflater.loadanimator (this, r.animator.scale); 
    Mmv.setpivotx (0); 
    Mmv.setpivoty (0); 
    The displayed call invalidate 
    mmv.invalidate (); 
    Anim.settarget (mMv); 
    Anim.start (); 

Very simple, directly to the view set Pivotx and Pivoty, and then call the invalidate, OK.
Look at the chart below:

Well, by writing XML declaration animation, using set nesting set, combining the Orderring property, you can basically implement any animation ~ ~ Above also demonstrates the pivot settings.

2. Layout animation (Layout animations)
The main use of layouttransition for the layout of the container animation, when the view level changes in the container has a transition animation effect.
The basic code is:

 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 transitions in

:
(1) layouttransition.appearing the animation
(2) that is set on this view when a view appears in ViewGroup Layouttransition.change _appearing When a view appears in ViewGroup, this view has an effect on other view locations, and the animation for other view Settings
(3) layouttransition.disappearing  When a view disappears in ViewGroup, the animation
(4) For this view setting is layouttransition.change_disappearing when a view disappears in ViewGroup, This view has an effect on other view locations, and the animated
(5) Layouttransition.change for other view settings is not an animation of other view locations caused by view appearance or disappearance, and then to other view settings.
Notice who the animation is set to, this view or another view.
OK, let's look at a comprehensive example:
Layout file:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:id=" @+id/id_container "android:layout_width=" Match_parent "Android:layout_heig" ht= "match_parent" android:orientation= "vertical" > <button android:layout_width= "wrap_content" and roid:layout_height= "Wrap_content" android:onclick= "addbtn" android:text= "Addbtns"/> <CheckBox A Ndroid:id= "@+id/id_appear" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android : Checked= "true" android:text= "appearing"/> <checkbox android:id= "@+id/id_change_appear" Android : layout_width= "wrap_content" android:layout_height= "Wrap_content" android:checked= "true" android:text= "CHAN Ge_appearing "/> <checkbox android:id=" @+id/id_disappear "Android:layout_width=" an droid:layout_height= "Wrap_content" AndroiD:checked= "true" android:text= "disappearing"/> <checkbox android:id= "@+id/id_change_disappear" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:checked= "true" Android:te 

 xt= "change_disappearing"/> </LinearLayout>

Code:

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 Oncheckedchangelistener {private ViewGroup Viewgrou 
  P 
  Private GridLayout mgridlayout; 
  private int mval; 
 
  Private Layouttransition mtransition; 
 
  Private CheckBox Mappear, Mchangeappear, Mdisappear, mchangedisappear; 
    @Override public void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
    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); 
    Mchangeappear.setoncheckedchangelistener (this); 
    Mdisappear.setoncheckedchangelistener (this); 
 
    Mchangedisappear.setoncheckedchangelistener (this); 
    Create a GridLayout mgridlayout = new GridLayout (this); 
    Set 5 buttons per column mgridlayout.setcolumncount (5); 
    Add to Layout Viewgroup.addview (mgridlayout); 
    Default animation all open 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 ge 
    Tanimator (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); 

 } 
}

Effect Chart:

The animation is a bit long, be patient, be sure to note that the animation is set for the current view or other views.
Of course, the animation support customization, but also support the set time, such as we modify, add the animation is:

Mtransition.setanimator (layouttransition.appearing, Mappear 
        ischecked ()? Objectanimator.offloat (This, "ScaleX", 0, 1) 
        : null); 

The effect is:

The original fade in, into the width from the middle magnification effect ~ ~ is not good ~ ~

3, view of the Anim method
in the SDK11, the view added a animate method, more convenient to achieve the animation effect.
Layout file:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" match_parent "> &L T;imageview android:id= "@+id/id_ball" android:layout_width= wrap_content "android:layout_height=" Wrap_conte NT "android:src=" @drawable/bol_blue "/> <linearlayout android:layout_width=" Fill_parent "Android 
 
    : layout_height= "Wrap_content" android:layout_alignparentbottom= "true" android:orientation= "Horizontal" > <button android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:onClic k= "Viewanim" android:text= "View anim"/> <button android:layout_width= "Wrap_content" and roid:layout_height= "Wrap_content" android:onclick= "Propertyvaluesholder" android:text= "PropertyValuesHolder" 
 
"/> </LinearLayout></RelativeLayout> 
 

Code:

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 (). Getdefaultdisplay (). 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 Withstartaction (new Runnable () 
          {@Override public void run () {LOG.E (TAG, "START"); }//Need API}). Withendaction (New Runnable () {@Override public V 
            OID Run () {LOG.E (TAG, "end"); 
                Runonuithread (New Runnable () {@Override public void run () { 
                Mblueball.sety (0); 
              Mblueball.setalpha (1.0f); 
          } 
            }); 
  }). Start ();          }  
}

Simple use of mblueball.animate (). Alpha (0). Y (MSCREENHEIGHT/2). Setduration (1000). Start () can be animated ~ ~ but need SDK11, then in SDK12, SDK16 added withstartaction and withendaction separately to perform some action before the animation, and after the animation. Of course you can. Setlistener (listener) and other operations.
Using Objectanimator to achieve the above changes, we can use: Propertyvalueholder

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.
Run Result: