"Android Basics" Detailed animation animation introduction and implementation _android

In front of the Popupwindow implementation display imitation Tencent News bottom pop-up menu useful to animation animation effect to realize the menu display and hide, this article to introduce the next bar.

1.Animation Animation type

The Android animation consists of four types:

in XML

Alph	Gradient Transparency Animation effect
Scale	Gradient Size Telescopic animation effect
Translate	Moving animation effect in the position of picture transformation
Rotate	Picture Transfer rotation animation effect

In Javacode

Alphaanimation	Gradient Transparency Animation effect
Scaleanimation	Gradient Size Telescopic animation effect
Translateanimation	Moving animation effect in the position of picture transformation
Rotateanimation	Picture Transfer rotation animation effect

2.Android Animation mode

There are two main modes of animation for animation:

One is tweened animation (gradient animation)

in XML	Javacode
Alpha	Alphaanimation
Scale	Scaleanimation

One is the frame by frame (Picture transformation animation)

in XML	Javacode
Translate	Translateanimation
Rotate	Rotateanimation

3. How to define animations in an XML file

The steps are as follows:

① New Android Project

② New Anim folder in res directory

③ a new my_anim.xml in the Anim directory (note file name lowercase)

④ Add animation code to My_anim.xml

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <alpha/>
  <scale/>
  <translate/> <rotate
  />
</set>

4.Android Animation parsing--xml

4.1 Alpha Gradient Transparency animation effect

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <alpha
    android:duration=" 1000 "
    android:fromalpha=" 0.0 "
    android:toalpha=" "1.0" >
  <!--
   Transparency Control animation effect Alpha
    floating-point value:
      Fromalpha property is the transparency at the beginning of the animation
      Toalpha  property for the animation at the end of the opacity
      description: 
        0.0 means full transparency
        1.0 means total opacity
      The numeric long value of the float data type between 0.0-1.0 is the above value
    
    : The
      Duration property is the duration description of the animation
      :   
        time in milliseconds

  -->
</set>

4.2 Scale gradient Size telescopic animation effect

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android= "Http://schemas.android.com/apk/res/android" > <scale android:duration= "1000" android:fillafter= "false" android:fromxscale= "0.0" android:fromy scale= "0.0" android:interpolator= "@android: Anim/accelerate_decelerate_interpolator" android:pivotx= "50%" Andro Id:pivoty= "50%" android:toxscale= "1.4" android:toyscale= "1.4"/> </set><!--Size Telescopic animation effect Scale properties: interpolator specifies an animated insert in the process of my experiment, I found three kinds of animated inserts when using the resources in Android.res.anim: accelerate_decelerate_interpolator acceleration-minus
     
      Speed Animation Insert Accelerate_interpolator acceleration-Animation insert Decelerate_interpolator deceleration-animation insert other specific animation effect floating-point values:  
      The Fromxscale property is the Flex dimension on the X coordinate at the start of the animation Toxscale property is the scaling dimension on the X coordinate at the end of the animation Fromyscale property is the scaling dimension on the y-coordinate at the start of the animation   
          The Toyscale property is a description of the scaling dimensions on the y-coordinate at the end of the animation: the above four property value 0.0 means that the contraction to no 1.0 indicates normal scaling A value of less than 1.0 indicates that the shrinkage value is greater than 1.0 indicates that the Pivotx property is the starting position of the x-coordinate of the animation relative to the object Pivoty the start position of the animation's y-coordinate relative to the object: The above two property values are from 0%-100% Value 50% is the value of the midpoint position on the x or y direction coordinate of the object: The Duration property is the animation duration description: Time in milliseconds Boolean value: Fillafter

 property when set to True, the animation is applied after the animation is finished-->

4.3 Translate picture conversion position moving animation effect

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">

  <translate
    android:duration=" android:fromxdelta= "
    android:fromydelta=" " -80"
    android:toxdelta= "android:toydelta="
    />
  <!--
   Translate position transfer animation effect
    integer value: The Fromxdelta property is the position on the X coordinate at the beginning of the
      animation  
      Toxdelta  property is the position on the X coordinate at the end of the animation
      Fromydelta property is the position
      on the y-coordinate at the start of the animation The Toydelta property is the  position on the y-coordinate at the end of the animation
      Note:
           fromxtype toxtype fromytype Toytype is not specified when the
           default is relative       
    to its own reference Long value:
      Duration property for animation duration
      Description:  time in milliseconds


  -->

</set>

4.4 Rotate Picture Transfer rotation animation effect

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android= "Http://schemas.android.com/apk/res/android" > <rotate android:duration= "3000" android:fromdegrees= "0" android:interpolator= "@android: Anim/acceler Ate_decelerate_interpolator "android:pivotx=" 50% "android:pivoty=" 50% "android:todegrees=" +350 "/> <!- -Rotate Rotate animation effect properties: interpolator Specifies an animated insert in my experiment, I found three kinds of animated inserts when using resources in Android.res.anim: Accel         Erate_decelerate_interpolator acceleration-deceleration animation Insert accelerate_interpolator acceleration-Animation Insert Decelerate_interpolator Deceleration-Animation inserts other specific animation effect floating-point value: Fromdegrees property is the angle of the object at the beginning of the animation Todegrees property to end animation The angle of the object rotation can be greater than 360 degrees: when the angle is negative--indicating counterclockwise rotation when the angle is positive--indicates clockwise rotation (negative from--to positive number: Shun    clockwise) (negative from--to negative: counterclockwise rotation) (positive from--to positive: clockwise rotation) (positive from--to negative: rotate counterclockwise) Pivotx property is the starting position of the animation's x-coordinate relative to the object pivoThe TY property is the starting position of the animation's y-coordinate relative to the object: The above two property values are values from the 0%-100% value 50% as the midpoint position on the x or y direction coordinate of the object: Dura

 tion property for animation duration Description: Time in milliseconds--> </set>

5. How to use animation effects in XML

public static Animation Loadanimation the context, int ID,

////////////The  
second parameter ID is a reference to an animated XML file
//Example:
myanimation= animationutils.loadanimation (this,r.anim.my_anim);
To load an animated XML file in XML using the static method Loadanimation () of the Animationutils class

6. How to use animation effects in XML

Define an animation instance object in code
private Animation Myanimation_alpha;
Private Animation Myanimation_scale;
Private Animation myanimation_translate;
Private Animation myanimation_rotate;
  
Initializes an instance object
myanimation_alpha=new alphaanimation (0.1f, 1.0f) according to the respective construction method;

Myanimation_scale =new scaleanimation (0.0f, 1.4f, 0.0f, 1.4f,
       animation.relative_to_self, 0.5f, Animation.relative_to_self, 0.5f);

Myanimation_translate=new translateanimation (30.0f, -80.0f, 30.0f, 300.0f);

Myanimation_rotate=new rotateanimation (0.0f, +350.0f,
        animation.relative_to_self,0.5f,animation.relative_to _self, 0.5f);

7.Android Animation parsing--javacode

7.1 alphaanimation

①alphaanimation class object Definition

Private Alphaanimation Myanimation_alpha

②alphaanimation Class object Construction

The first parameter fromalpha the transparency//second parameter at the beginning of the animation
Toalpha for the animation at the end of the transparency
alphaanimation (float fromalpha, float toalpha) 
// Description: 0.0 means completely transparent, 1.0 means completely opaque
myanimation_alpha=new alphaanimation (0.1f, 1.0f);

③ Set Animation duration

Set time duration of 5000 milliseconds
myanimation_alpha.setduration (5000);

7.2 scaleanimation

①scaleanimation class object Definition

Private Alphaanimation Myanimation_alpha;

②scaleanimation Class object Construction

Scaleanimation (float FromX, float toX, float fromY, float toY,
      int pivotxtype, float pivotxvalue, int pivotytype, Floa T pivotyvalue)

///The first parameter FROMX the expansion dimension on the X coordinate at the beginning of the animation//the  
second parameter tox the telescopic dimension on the X coordinate at the end of the animation   
//The third parameter fromy the scaling dimension on the y-coordinate at the start of the animation  
//Fourth parameter toy for the animation at the end of the y-coordinate scaling dimension/ 
* Description: The
          above four property value  
          0.0 means that the contraction to no 
          1.0 indicates that the normal telescopic   
          value is less than 1.0 for contraction 
          The value is greater than 1.0 to enlarge///
fifth parameter Pivotxtype for the animation in the X axis relative to the object position type 
//sixth parameter pivotxvalue is the animation relative to the object's x-coordinate the start position
/ The seventh parameter Pivotxtype is the beginning position of the animation in the Y axis relative to the object position type  
//eighth parameter pivotyvalue to the Y coordinate of the animation relative to the object
Myanimation_scale =new Scaleanimation (0.0f, 1.4f, 0.0f, 1.4f,
       animation.relative_to_self, 0.5f, Animation.relative_to_self, 0.5f);

③ Set Animation duration

Set time duration of 700 milliseconds
myanimation_scale.setduration (700);

7.3 Translateanimation

①translateanimation class object Definition

Private Alphaanimation Myanimation_alpha;

②translateanimation Class object Construction

The first parameter fromxdelta to the move position on the X coordinate at the beginning of the animation//the  
second parameter toxdelta to the move position on the X coordinate at the end of the animation/   
/The third argument fromydelta the move position on the y-coordinate at the start of the animation   
/Fourth parameter Toydelta is the move position on the y-coordinate at the end of the animation
translateanimation (float fromxdelta, float toxdelta,float Fromydelta, float Toydelta)

③ Set Animation duration

Set time duration of 2000 milliseconds
myanimation_translate.setduration (2000);

7.4 rotateanimation

①rotateanimation class object Definition

Private Alphaanimation Myanimation_alpha;

②rotateanimation Class object Construction

Rotateanimation (float fromdegrees, float todegrees,int pivotxtype, float pivotxvalue, int pivotytype, float pivotyvalue)
      
//The first parameter fromdegrees the angle of rotation at the beginning of the animation//the  
second parameter todegrees the angle to which the animation is rotated/  
//The third argument Pivotxtype for animation on the x axis relative to the object position type 
// The fourth parameter pivotxvalue is the start position of the animation's x-coordinate relative to the object
//fifth Pivotxtype is the beginning position of the animation at the Y axis relative to the object position type  
//Sixth argument pivotyvalue to the Y coordinate of the animation relative to the object
myanimation_rotate=new rotateanimation (0.0f, +350.0f,animation.relative_to_self,0.5f,animation.relative_to_ SELF, 0.5f);

③rotateanimation Class object Construction

Set time duration of 3000 milliseconds
myanimation_rotate.setduration (3000);

8. How to use animation effects in Java code

Use a method inherited from the View parent class Startanimation () to add an animation effect to view or subclass view, and so on

public void Startanimation (Animation Animation)

9. Let's have a chestnut.

9.1 Using the XML file method

The ① effect chart is as follows:

② defines an animation in an XML file, as mentioned earlier

③ main interface layout, there's nothing to say, very simple O (∩_∩) o

④ main Interface Logic code, this is the main, control animation display

Package com.yanis.base;
Import android.app.Activity;
Import Android.os.Bundle;
Import Android.view.View;
Import Android.view.View.OnClickListener;
Import android.view.animation.Animation;
Import Android.view.animation.AnimationUtils;
Import Android.widget.Button;

Import Android.widget.ImageView;
  public class Animationactivity extends activity implements Onclicklistener {private ImageView imgpic;
  Private Button Btnalpha, Btnscale, Btntranslate, btnrotate;

  Private Animation myanimation;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);

    Setcontentview (r.layout.activity_animation);

    Intiview ();
  InitData ();
    }/** * Initialization component */private void Intiview () {imgpic = (ImageView) Findviewbyid (r.id.imgpic);
    Btnalpha = (Button) Findviewbyid (R.id.btnalpha);
    Btnscale = (Button) Findviewbyid (R.id.btnscale);
    Btntranslate = (Button) Findviewbyid (r.id.btntranslate); Btnrotate = (Button) findviewbYid (r.id.btnrotate);
    }/** * Initialization data */private void InitData () {Btnalpha.setonclicklistener (this);
    Btnscale.setonclicklistener (this);
    Btntranslate.setonclicklistener (this);
  Btnrotate.setonclicklistener (this); @Override public void OnClick (View v) {switch (V.getid ()) {case R.id.btnalpha:/** * uses the XML Animation effect first argument context for program The second parameter ID is the reference to the animated XML file/myanimation = Animationutils.loadanimation (This, R.anim.alpha_
      ANIM);
      Imgpic.startanimation (myanimation);

    Break
      Case r.id.btnscale:myanimation = Animationutils.loadanimation (this, r.anim.scale_anim);
      Imgpic.startanimation (myanimation);

    Break
      Case r.id.btntranslate:myanimation = Animationutils.loadanimation (this, r.anim.translate_anim);
      Imgpic.startanimation (myanimation);

    Break
      Case r.id.btnrotate:myanimation = animationutils. Loadanimation (this, r.anim.rotate_anim); Imgpic.Startanimation (myanimation);

    Break

 }
  }
}

10. Use Animation-list to realize frame by step animation

The Chestnut effect chart is as follows:

The steps are as follows:

① add picture footage to the res/drawable directory

② add an animated animation-list frame layout file to the Drawable folder

<?xml version= "1.0" encoding= "Utf-8"?> <!--root label is Animation-list, where oneshot represents whether to show only once, set to false will not stop looping the animation root label , the item label is used to declare each picture in the animation android:duration represents the length of time that the picture was displayed--> <animation-list xmlns:android= "http:// Schemas.android.com/apk/res/android "android:oneshot=" false "> <item android:drawable=" @drawable/cmmusic_pro
    Gress_1 "android:duration=" > </item> <item android:drawable= "@drawable/cmmusic_progress_2" "Android:duration=" > </item> <item android:drawable= "@drawable/cmmusic_progress_3" Android:dur ation= > </item> <item android:drawable= "@drawable/cmmusic_progress_4" android:duration= "150" &
  Gt </item> <item android:drawable= "@drawable/cmmusic_progress_5" android:duration= "> </item&gt"
  ;
    <item android:drawable= "@drawable/cmmusic_progress_6" android:duration= "> </item> <item" Android:drawable= "@drawablE/cmmusic_progress_7 "android:duration=" > </item> <item android:drawable= "@drawable/cmmusic_pr

 Ogress_8 "android:duration=" > </item> </animation-list>

③ main interface page layout settings, too simple, not to repeat the

The ④ main interface code is as follows:

Package com.yanis.base;
Import android.app.Activity;
Import android.graphics.drawable.AnimationDrawable;
Import Android.os.Bundle;
Import Android.view.View;
Import Android.view.View.OnClickListener;
Import Android.widget.Button;

Import Android.widget.ImageView;
  public class Animationactivity extends activity implements Onclicklistener {private ImageView imgpic;
  Private Button btnstart, btnstop;

  Private Animationdrawable animationdrawable;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);

    Setcontentview (r.layout.activity_animation);

    Intiview ();
  InitData ();
    }/** * Initialization component */private void Intiview () {imgpic = (ImageView) Findviewbyid (r.id.imgpic);
    btnstart = (Button) Findviewbyid (R.id.btnstart);
  Btnstop = (Button) Findviewbyid (r.id.btnstop);
    }/** * Initialization data */private void InitData () {Btnstart.setonclicklistener (this);
    Btnstop.setonclicklistener (this); SetsA drawable as the content of this imageview.
    Imgpic.setimageresource (R.drawable.loading_anim);
  Assign a value to an animated resource animationdrawable = (animationdrawable) imgpic.getdrawable (); @Override public void OnClick (View v) {switch (V.getid ()) {case R.id.btnstart:animationdrawable.st

    Art ();//Start break; Case R.id.btnstop:animationdrawable.stop ();

    Stop the break;

 }
  }
}

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.