Getting Started with Android l animations

Android L brings a lot of new features, including a lot of animations that you can use in your own apps. In this article I'll explain these animations and how to use them in your app. All the code in this article can be found on GitHub.

Ripple and emphasis

Android now supports a small number of predefined style attributes, but is limited to applying specific parts such as the status bar, navigation bar. The new system allows us to get two very concise and useful animations in a simple way: Ripple and stressed UI components. Ripple is a very good response to the user in the UI, and can customize the color of the ripple, only need to set the color value of the Colorcontrolhighlight property.

<item name= "Android:colorcontrolhighlight" > #0000AA </item>

Ripples

As simple as this, many UI components like check boxes can use the Coloraccent property in the Styles folder to set colors that match the theme of your app without having to use different picture and status selectors.

<item name= "Android:coloraccent" > #00FF00 </item>

Circular Display

One common task in Android is to change the visibility of an element on the screen. Now the developer has one more choice to make the job more beautiful: a circular display. Use the Viewanimationutil.createcircularreveal method and then change the visibility of the view at the right time by using an animated listener. There are two similar ways to make a view visible or disappear. Note that the display method has a duration setting so that the animation is displayed and the animation is hidden faster. The GetX () and Gety () methods return the coordinates of the center point of the X, Y axis of the picture, and the Getradius () method returns the width of the view.

Privatevoidhideimagecircular () {intx = GetX ();    Inty = GetY ();     Intradius = Getradius ();     Valueanimator anim = Viewanimationutils.createcircularreveal (Mimageview, x, Y, radius,0);            Anim.addlistener (Newanimatorlisteneradapter () {@Override publicvoidonanimationend (Animator animation) {            Super.onanimationend (animation);        Mimageview.setvisibility (view.invisible);     }    }); Anim.start ();}    Privatevoidrevealimagecircular () {intx = GetX ();    Inty = GetY ();     Intradius = Getradius ();     Valueanimator anim = Viewanimationutils.createcircularreveal (Mimageview, X, y,0, RADIUS);    Anim.setduration (1000);            Anim.addlistener (Newanimatorlisteneradapter () {@Override Publicvoidonanimationstart (Animator animation) {            Super.onanimationstart (animation);        Mimageview.setvisibility (view.visible);     }    }); Anim.start ();}

Circular Reveal

Activity Transitions Animation

In addition to the aforementioned animations, the Android L also adds some transition animations for activity-exploding, swiping, fading, and smoothing the app. Using these animations, you must both enter and exit the activity to require the use of these content transition effects, and before the Setoncontent () method.

GetWindow (). Requestfeature (window.feature_content_transitions);

I also support converting animations by styling, and I'll explain how to set the session effect in activity with styles. Use the GetWindow (). Setexittransition (Transition) and GetWindow (). Setentertransition (Transition) method to tell the activity how to execute when open and closed. Using burst animations, the code from mainactivity and listfragment to the second activity can be written like this:

Listfragment:getactivity (). GetWindow (). Setexittransition (Newexplode ()); Intent =newintent (Getactivity (), Explodeanimationactivity.class); startactivity (intent);

Explodeanimationactivity: @OverrideprotectedvoidonCreate (Bundle savedinstancestate) {    super.oncreate ( Savedinstancestate);    GetWindow (). Requestfeature (window.feature_content_transitions);    GetWindow (). Setentertransition (Newexplode ());    GetWindow (). Setexittransition (Newexplode ());    Setcontentview (r.layout.activity_explode_animation);} @OverridepublicvoidonBackPressed () {    super.onbackpressed ();    Finishaftertransition ();}

Note the onbackpressed () method-this is important. Because it lets the operating system know to complete the execution of the animation before shutting down the second activity. With these simple codes, we have three animations of activity specials.

Explosion Transition

Slide Transition

Fade Transition

Although I did not use this very useful tool, but should pay attention to is the special animation monitoring--transition.transitionlistener. Listening allows you to take some action at a specific point in and out of the animation life cycle, giving you more control over how your app behaves. To prevent the content from leaking, you need to remove the listener in the Ondestory () method.

GetWindow (). Getentertransition (). AddListener (Newtransition.transitionlistener {    @Override    Publicvoidontransitionstart (Transition Transition) {     }     @Override    publicvoidontransitionend ( Transition Transition) {     }     @Override    publicvoidontransitioncancel (Transition Transition) {     }     @ Override    publicvoidontransitionpause (Transition Transition) {     }     @Override    Publicvoidontransitionresume (Transition Transition) {     }});

The element sharing of activity session animation

In addition to the standard transition animations, it is now supported to share elements during the two activity transition animations. The first thing to do is set the activity, use the content transition animation, and allow the transition animation to be overwritten. You can set it by style:

<itemname= "Android:windowcontenttransitions" >true</item><itemname= "Android: Windowallowentertransitionoverlap ">true</item><itemname=" Android:windowallowexittransitionoverlap " >true</item>

Element-sharing animations can also be set in code, in this case, I'll use styles to complete:

<itemname= "Android:windowsharedelemententertransition" > @transition/changebounds</item><itemname = "Android:windowsharedelementexittransition" > @transition/changebounds</item>

Changebounds transition animations are defined as XML files that are stored in the resource file. Note that I added two-bit two properties: the time-length and the interpolator, making the animation more interesting.

Changebounds.xml:<changebounds    xmlns:android= "Http://schemas.android.com/apk/res/android"    android: duration= "    android:interpolator=" <a href= "Http://www.jobbole.com/members/android/" rel= "nofollow" > @android </a>:interpolator/bounce "/>

The next step is to make sure that the view type implementing the comparable interface is used in the two activity's layout file (this example uses ImageView) and that their ViewName property values must be the same. The view that has a shared element in the first activity is this:

<imageview    android:id= "@+id/image"    android:viewname= "image"    android:layout_width= "Match_parent"    android:layout_height= "250DP"/>

The second activity is this:

<imageview    android:id= "@+id/image"    android:layout_alignparentbottom= "true"    android:viewname= " Image "    android:layout_width=" match_parent "    android:layout_height=" 250DP "/>

Now that all the XML settings are ready, we can start writing the code in the activity that performs the animation. In the first activity we set the parent class container view Settransitiongroup to False, then get the drawable of the imageview that we want to share the element with, and convert it into a byte stream object into the intent bundle. Then, create the Activityoptions object for ImageView using the scene animation transformation and turn on the next activity.

Intent Intent =newintent (this, sharedelementsecondanimationactivity.class); ((ViewGroup) mimageview.getparent ()). Settransitiongroup (false); Bytearrayoutputstream Stream =newbytearrayoutputstream ();( (bitmapdrawable) mimageview.getdrawable ()). Getbitmap (). Compress (bitmap.compressformat.png,100, stream); Intent.putextra ("image", Stream.tobytearray ()); Activityoptions options; try{    options = Activityoptions.makescenetransitionanimation (This, Mimageview, "image");} catch (NullPointerException e) {    log.e ("Sharedelementanimationchangeboundsactivity", "Did you set your viewnames in The layout file? ");    return;} if (options ==null) {    log.e ("Sharedelementanimation", "Options is null". Something broke. Good luck! ");} else{    startactivity (Intent, Options.tobundle ());}

In the second activity, read the byte stream from the intent bundle and decode it to the bitmap object, and then set it to ImageView. The second activity also overrides the Onbackpressed () method to perform an exit animation when the return key is pressed.

@OverrideprotectedvoidonCreate (Bundle savedinstancestate) {    super.oncreate (savedinstancestate);    Setcontentview (r.layout.activity_shared_element_second_animation);    Mimageview = (ImageView) Findviewbyid (r.id.image);     byte[] ByteArray = Getintent (). Getbytearrayextra ("image");    Bitmap Bitmap = Bitmapfactory.decodebytearray (bytearray,0, bytearray.length);    Mimageview.setimagebitmap (bitmap);} @OverridepublicvoidonBackPressed () {    super.onbackpressed ();    Finishaftertransition ();}

Based on these we have completed the Shared element transformation animation, where the shared element is moved to a new position in the second activity and has a rebound effect.

Examples of these animations are only the tip of the iceberg for Android L and do not involve scene animations introduced in Kit Kat. I hope this tutorial will help other developers learn something new and use animations to make the app look good and fun.

Getting started with Android L animation