Tween animation effect of Android Basics _android

Android provides two animations, one is tween animation, tween animation through the content of the view to perform a series of image transformation (including translation, scaling, rotation, change the transparency) to achieve animation, animation effect definition can use XML, can also use encoding to achieve. Let's look at the animation effect that tween can achieve.
First look at the overall structure of the project:

The effect we want to achieve is as shown in figure

Click on the button to perform the appropriate animation operation.

Layout file Activity_main.xml

<linearlayout 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 "Android:o" rientation= "vertical" tools:context= "com.example.tweentest.MainActivity" > <linearlayout android:layout_ Width= "Match_parent" android:layout_height= "wrap_content" android:orientation= "vertical" > <linearlayout andr Oid:layout_width= "Match_parent" android:layout_height= "wrap_content" android:orientation= "Horizontal" > <But ton android:id= "@+id/alpha" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:onCli ck= "Doanim" android:text= "Transparent"/> <button android:id= "@+id/scale" android:layout_width= "Wrap_content" Andr oid:layout_height= "Wrap_content" android:onclick= "Doanim" android:text= "Zoom/> <button android:id=" @+id/rot Ate "android:layout_width=" wrap_content "android:layout_height="Wrap_content "android:onclick=" Doanim "android:text= rotation"/> <button android:id= "@+id/translate" android:l

  Ayout_width= "Wrap_content" android:layout_height= "wrap_content" android:onclick= "Doanim" android:text= "mobile"/> <button android:id= "@+id/combo" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Androi d:onclick= "Doanim" android:text= "combination"/> </LinearLayout> <button android:id= "@+id/go_other_activity" a Ndroid:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:onclick= "Doanim" android:text= "go!" "/> </LinearLayout> <linearlayout android:layout_width=" match_parent "android:layout_height=" Match_
  Parent "android:orientation=" Horizontal "> <imageview android:id=" @+id/image1 "android:layout_width=" 200DP "

 android:layout_height= "200DP" android:src= "@drawable/jiafeimao"/> </LinearLayout> </LinearLayout>

OK, let's look at the first animation effect first.
To animate a picture to become transparent, create a new XML file named Alpha in the Anim folder, and the animation effect on transparency is written in this file:

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

 <!--spend 1000 milliseconds, from opaque (1) to Transparent (0)-->
 <!--
 RepeatCount represents the number
 of repetitions Repeatmode represents the starting pattern, restart indicates that each time it restarts, reverse represents the next, opaque-> transparent-> opacity
 -->
 < Alpha
 android:duration= "android:fromalpha=" "
 1"
 android:repeatcount= "5"
 android: Repeatmode= "Reverse"
 android:toalpha= "0"/>

</set>

The Duration property indicates when the animation is performed, in milliseconds, repeatcount the number of times the animation repeats, the Repeatmode property has two values, and the restart, which means that the animation restarts after each execution (opaque-> transparent, opaque- > Transparency ...), reverse indicates that the animation does not start again after each execution, but then reverses (opaque-> transparent-> opaque-> transparent ...), in other words, if it is reverse, it means that the animation changes from opacity to opacity and then slowly back to opacity. If it is restart, the animation is changed from opaque to transparent, and then quickly restored to its original state. These three attributes are available in all tween animations and are the most commonly used properties. Fromalpha represents initial transparency, 1 is opaque, 0 is fully transparent, and toalpha represents transparency at the end of the animation.

This is an animated XML file, and then look at what the Java code is like.

public class Mainactivity extends activity {Private ImageView IV = NULL;
 Private Animation Animation = null;
 @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
 Setcontentview (R.layout.activity_main);
 THIS.IV = (ImageView) This.findviewbyid (r.id.image1); public void Doanim (View v) {switch (V.getid ()) {case R.id.alpha://Read Animation file animation = Animationutils.loadanimati
  On (this, r.anim.alpha);
  When the animation is finished, use what page Fill//After the end of the animation to fill, that is, to maintain the end of the picture Animation.setfillafter (true);
  Applied Animation special Effects iv.startanimation (animation);
 Break
  Case r.id.scale:animation = Animationutils.loadanimation (this, r.anim.scale);
  Iv.startanimation (animation);
 Break
  Case r.id.rotate:animation = Animationutils.loadanimation (this, r.anim.rotate);
  Iv.startanimation (animation);
 Break
  Case r.id.translate:animation = Animationutils.loadanimation (this, r.anim.translate);
  Iv.startanimation (animation);
 Break Case r.id.combo:animation =Animationutils.loadanimation (this, R.anim.combo);
  Iv.startanimation (animation);
 Break
  Case R.id.go_other_activity:intent Intent = new Intent (mainactivity.this,secondactivity.class);
  StartActivity (Intent);
  Set mainactivity to leave from the left, secondactivity from the right into Overridependingtransition (R.anim.enter_anim, R.anim.exit_anim);
 Break

 }
 }
}

Get ImageView First, then read the animated file when you click the button and animate the ImageView.

To scale an animation:

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

 <!--
 Two 1 indicates that the image size is unchanged at the start, and two 2 means the image is magnified one times
 If less than 1 means the image shrinks. Two 0 indicates that the upper-left corner is magnified
 pivotx if it is 50%, the image center magnification
 Pivotx If it is 50%p, the representation is based on the parent center magnification 
 Infinite as its English meaning, infinite loop

 -->
 <scale
 android:duration= "1000"
 android:fromxscale= "1"
 android:fromyscale= "1"
 android:pivotx= "0"
 android:pivoty= "0"
 android:repeatcount= "Infinite"
 android:repeatmode= " Reverse "
 android:toxscale=" 2 "
 android:toyscale=" 2 "/>

</set>

Fromxscale and Fromyscale respectively represent the initial magnification of the image, 1 means no scaling, and Toxscale and Toyscale represent the zoom at the end of the animation, 2 for the animation, and 0.5 for one times. Pivotx and Pivoty indicate the reference point when scaling is performed, two values are 0 to perform scaling operations based on the upper-left corner of the image, and if all 50% represents a scaling operation based on the image center, if 100% represents a scaling operation based on the lower-right corner of the image, if it is 50%p, Represents a scaling operation based on the center of the screen, if the 100%p represents a scaling operation based on the lower-right corner of the screen.

See the Java code above.

Rotate Animation:

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

 <!--fromdegrees indicates the angle at which the starting point
 todegrees, 180 means the rotation half circle
 Two 100% means that based on their own lower right corner rotation
 want to turn upside down, change 180 to 180 to
 -->
 <rotate
 android:duration= "1000"
 android:fromdegrees= "0"
 android:pivotx= "100%"
 android:pivoty= "100%"
 android:todegrees= "180"/ >

</set>

Here are two parameter explanations, fromdegrees for initial angle, 0 for normal, todegrees for rotation angle, 180 for clockwise rotation 180 degrees,-180 for counterclockwise rotation 180 degree pivotx parameter meaning and scaling animation in the same meaning.

Java code is the same as above.

To move an animation:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android "
 android:shareinterpolator= false" >
<!--from where to begin moving
to representations move to where
100% means move to the lower right corner of yourself
100%p is moved to the lower right corner of the screen
 -->
 <translate
 android:repeatcount= "Infinite
 " android:repeatmode= " Reverse "
 android:duration=" 1000 "
 android:fromxdelta=" 0 "
 android:fromydelta=" 0 "
 android: Toxdelta= "100%"
 android:toydelta= "100%"/>

</set>

Fromxdelta represents the position of the image at the x-axis at the beginning of the Toxdelta where the image is positioned at the end of the x axis.

Four animation effects have been said, if you want to achieve a combination of effects?

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

 <rotate
 android:duration=" 1000 "
 android: fromdegrees= "0"
 android:pivotx= "100%"
 android:pivoty= "100%"
 android:todegrees= "180"/>

 < Alpha
 android:duration= "android:fromalpha=" "
 1"
 android:repeatcount= "5"
 android: Repeatmode= "Reverse"
 android:toalpha= "0"/>

 <scale android:duration=
 "1000"
 android: fromxscale= "1"
 android:fromyscale= "1"
 android:pivotx= "0"
 android:pivoty= "0"
 android: Repeatcount= "Infinite"
 android:repeatmode= "reverse"
 android:toxscale= "2"
 android:toyscale= "2"/ >

 <translate
 android:duration= "1000"
 android:fromxdelta= "0"
 android:fromydelta= "0"
 android:repeatcount= "Infinite"
 android:repeatmode= "reverse"
 android:toxdelta= "100%
 " Android:toydelta= "100%"/>

</set>

Put all of the previous animation effects in one file.

Animations in Android can be used on any component, because the components are inherited from view, and the Startanimation (Animation Animation) method is the method in the view. So is it possible to use animation to toggle between two activity? Of course. In the Java code above, there is one sentence:

Case r.id.go_other_activity:
  Intent Intent = new Intent (mainactivity.this,secondactivity.class);
  StartActivity (intent);
  Set mainactivity to leave from the left, secondactivity from the right into
  overridependingtransition (R.anim.enter_anim, R.anim.exit_anim);
  Break

To animate the switch between activity, use the Overridependingtransition (R.anim.enter_anim, R.anim.exit_anim) method, which takes two parameters, Animation that represents the entry of a new activity and an animation of an old activity when it goes out.

Animation when entering:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android "
 android:shareinterpolator=" false ">
 <translate
 android:duration=" 1000
 " Android:fromxdelta= "100%"
 android:fromydelta= "0"
 android:toxdelta= "0"
 android:toydelta= "0"/>

</set>

When you go out, animate:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android "
 android:shareinterpolator=" false ">
 <translate
 android:duration=" 1000 "
 android: Fromxdelta= "0"
 android:fromydelta= "0"
 android:toxdelta= " -100%"
 android:toydelta= "0"/>

</ Set>

Effect as shown:

The mainactivity gradually moved out and secondactivity gradually came in from the right.

Original link: http://blog.csdn.net/u012702547/article/details/45697505

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.