Android animation effects: translate, scale, Alpha, and rotate

Source: Internet
Author: User
2011.10.28 Note: If you need to stop the widget at the position after the animation, you need to set the Android: fillafter attribute to true on the set node. By default, after the animation ends, the system returns to the position before the animation. After setting Android: fillafter, we can see that the control remains behind the animation. In fact, we only see that the actual position is still in front of the original animation, you will find that the button cannot be clicked, which is the reason. So we can manually move the control to the position after the animation ends. In this case, the root node is absolutelayout, because linearlayout cannot be located through the X or Y coordinates. Specific Method: change the layout to absolutelayout and use the setanimationlistener of animation to set the animation playback event. In the onanimationend method, use the setlayoutparams method of the control to set the animation position. Note: In April May 15, overridependingtransition only supports two types of animation effects for Android 2.0 and later versions. One is tweened animation, and the other is frame by frame animation. Generally, we use the first one. The animation can be further divided into alphaanimation, rotateanimation for transparency conversion, scaleanimation for rotation conversion, and translateanimation for Zoom conversion ). The animation effect is defined in the XML file under the anim directory. Program Use animationutils. loadanimation (context, int resourcesid) to load the file into an animation object. When you need to display the animation effect, run the startanimation method of the view to be animated and input the animation. You can also apply the animation effect after switching activity. After the startactivity method, execute the overridependingtransition method. The two parameters are the animation effect before switching, and the animation effect after switching, in the following example, two alpha animations are input to implement fade-in and fade-out effects when switching activity. Post below Code : Main. xml: <? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: Orientation = "vertical" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: id = "@ + ID/ll" Android: Background = "@ drawable/White"> <textview Android: Id = "@ + ID/TV" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "translate animation effect"/> <textview Android: Id = "@ + ID/TV2" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "scale animation effect"/> <textview Android: Id = "@ + ID/TV3" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "Alpha animation effect"/> <textview Android: Id = "@ + ID/TV4" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "rotate animation effect"/> <button Android: Id = "@ + ID/bt3" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "animation demo"/> <button Android: Id = "@ + ID/BT" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = ""/> </linearlayout> activity2.xml: <? XML version = "1.0" encoding = "UTF-8"?> <Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: Orientation = "vertical" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: id = "@ + ID/ll2"> <textview Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "activity2"/> <button Android: id = "@ + ID/bt2" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "Return main"/> </linearlayout>: a1.xml fade-out effect <? XML version = "1.0" encoding = "UTF-8"?> <Set xmlns: Android = "http://schemas.android.com/apk/res/android"> <Alpha Android: fromalphi = "1.0" Android: toalpha = "0.0" Android: duration= "500" /> </Set> <! -- Fromalpha: transparency at start toalpha: transparency at end Duration: animation duration --> a2.xml fade-in effect: <? XML version = "1.0" encoding = "UTF-8"?> <Set xmlns: Android = "http://schemas.android.com/apk/res/android"> <Alpha Android: fromalphi = "0.0" Android: toalpha = "1.0" Android: duration= "500" /> </Set> rotate. xml rotation effect: <? XML version = "1.0" encoding = "UTF-8"?> <Set xmlns: Android = "http://schemas.android.com/apk/res/android"> <rotateandroid: interpolator = "@ Android: anim/accelerate_decelerate_interpolator" Android: fromdegrees = "300" Android: todegrees = "-360" Android: export Tx = "10%" Android: Ty = "100%" Android: Duration = "10000"/> </set> <! -- When fromdegrees starts, the angle "todegrees" at the end of the animation is reduced to TX, while the rotation ty is not clear. The effect should be the center that defines the rotation --> scale. xml scaling effect: <? XML version = "1.0" encoding = "UTF-8"?> <Set xmlns: Android = "http://schemas.android.com/apk/res/android"> <Scale Android: interpolator = "@ Android: anim/decelerate_interpolator" Android: fromxscale = "0.0" Android: toxscale = "1.5" Android: fromyscale = "0.0" Android: toyscale = "1.5" Android: shorttx = "50%" Android: shortty = "50%" Android: startoffset = "0" Android: Duration = "10000" Android: repeatcount = "1" Android: repeatmode = "reverse"/> </set> <! -- Interpolator: Specifies the animation insertor. Common examples include the accelerator insertor accelerate_decelerate_interpolator, the accelerator insertor accelerate_interpolator, And the decelerate_interpolator. Fromxscale, fromyscale, scale X and Y before the animation starts, 0.0 is not displayed, 1.0 is normal size toxscale, toyscale, the final scaling factor of the animation, 1.0 is normal size, if the animation is larger than 1.0, the starting position of the animation is enlarged to TX, and the percentage of the animation to the screen is 50%, which indicates that the animation starts startoffset from the middle of the screen. If the animation is executed only once, the duration will be paused before execution, in milliseconds duration. The time consumed by an animation effect, in milliseconds. The smaller the value, the faster the animation repeatcount, and the repeated animation count, the animation will execute this value + 1 repeatmode, the animation repetition mode, and the reverse is reverse. When the occasional execution is performed, the animation will be in the opposite direction. Restart is re-executed, and the direction remains unchanged --> translate. xml moving effect: <? XML version = "1.0" encoding = "UTF-8"?> <Set xmlns: Android = "http://schemas.android.com/apk/res/android"> <translateandroid: fromxdelta = "320" Android: toxdelta = "0" Android: fromydelta = "480" Android: toydelta = "0" Android: Duration = "10000"/> </set> <! -- Fromxdelta: X and Y coordinates at the start of fromydelta, X: 320, Y: 480 toxdelta at the bottom right corner of the screen, and X at the end of toydelta animation, Y coordinates --> The following is the program code, Main. java: Package COM. pocketdigi. animation; import android. app. activity; import android. content. intent; 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. textview; public class main extends activity {/** called when the activity is first created. */ Textview TV, TV2, TV3, TV4; Button bt3; @ override public void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. main); button bt = (button) findviewbyid (R. id. BT); TV = (textview) findviewbyid (R. id. TV); TV2 = (textview) findviewbyid (R. id. TV2); TV3 = (textview) findviewbyid (R. id. TV3); TV4 = (textview) findviewbyid (R. id. TV4); bt3 = (button) findviewbyid (R. id. bt3); BT. setonclicklistener (New onclicklistener (){ @ Override Public void onclick (view v ){ // Todo auto-generated method stub Intent intent = new intent (main. This, activity2.class ); Startactivity (intent ); Overridependingtransition (R. anim. A2, R. anim. A1 ); // Fade out the animation effect }); Bt3.setonclicklistener (New onclicklistener (){ @ Override Public void onclick (view v ){ // Todo auto-generated method stub Animation translate = animationutils. loadanimation (main. This, R. anim. Translate ); Animation scale = animationutils. loadanimation (main. This, R. anim. scale ); Animation rotate = animationutils. loadanimation (main. This, R. anim. Rotate ); Animation alpha = animationutils. loadanimation (main. This, R. anim. A1 ); // Load the XML file into an animation object TV. startanimation (translate ); Tv2.startanimation (scale ); Tv3.startanimation (alpha ); Tv4.startanimation (rotate ); // Apply Animation }) ;}} Activity2.java: Package COM. pocketdigi. animation; import android. app. activity; import android. content. intent; import android. OS. bundle; import android. view. view; import android. view. view. onclicklistener; import android. widget. button; public class activity2 extends activity { Button bt2; Public void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. activity2); bt2 = (button) findviewbyid (R. id. bt2); bt2.setonclicklistener (New onclicklistener (){ @ Override Public void onclick (view v ){ // Todo auto-generated method stub Intent intent = new intent (activity2.this, Main. Class ); Startactivity (intent ); Overridependingtransition (R. anim. A2, R. anim. A1 ); }) ;}} Note: the animation switching activity is valid only when the activity is newly started. If the activity has been started and the intent has added flag_activity_reorder_to_front, the activity will not be started, there is no animation effect.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.