Create material Design-style Android apps-using custom animations

Animations give users feedback when they click on material design, and provide consistent vision in the user interface of the program. Material themes for buttons and activity conversions provide some default animations, in android5.0 (API 21) and later versions, you can customize these animations and create a new animation:

• Touch Feedback (Tactile feedback)
• Circular Reveal (circular exposure effect)
• Activity transitions (activity conversion effect)
• Curved motion (curved motion)
• View state changes (ViewState change)

Customizing Touch Feedback

Touch feedback provides an instant visual confirmation in material design when the user acts on UI elements in the touch point. The default touch feedback animation for a button is to use the new Rippledrawable class, which is a ripple effect that transforms between different states.

In most cases, we can use this feature to define the background in an XML file:

Android:attr/selectableitembackground a ripple with boundaries.
Android:attr/selectableitembackgroundborderless can exceed the ripple of the view area
? Android:attr/selectableitembackgroundborderless is the 21 newly added API

Also, use the ripple element definition RippleDrawable as an XML resource.

You can assign a color to the Rippledrawable object. Use the properties of the theme android:colorControlHighlight to change the default touch feedback color.

For more information, see the API Guide for the Rippledrawable class.

Use the disclosure effect

Exposing animations provides the user with visual persistence to display or hide a set of interface elements. ViewAnimationUtils.createCircularReveal()method allows you to use an animation effect to expose or hide a view.

This exposes a previously hidden view:

previously invisible Viewview MyView = Findviewbyid (R.id.my_view);//Get the Center for the clipping circleint cx = (my View.getleft () + myview.getright ())/2;int cy = (myview.gettop () + myview.getbottom ())/2;//Get the final radius for th E clipping Circleint Finalradius = Math.max (Myview.getwidth (), Myview.getheight ());//Create the animator for this view (t He start radius is zero) Animator anim =    viewanimationutils.createcircularreveal (MyView, CX, CY, 0, Finalradius);//MA Ke the view visible and start the animationmyview.setvisibility (view.visible); Anim.start ();

This hides a previously displayed view:

Previously visible viewfinal View MyView = Findviewbyid (R.id.my_view);//Get the Center for the clipping circleint cx = (Myview.getleft () + myview.getright ())/2;int cy = (myview.gettop () + myview.getbottom ())/2;//get the initial radius For the clipping circleint Initialradius = Myview.getwidth ();//Create the animation (the final radius is zero) Animator an im =    viewanimationutils.createcircularreveal (MyView, CX, CY, Initialradius, 0);/make the View invisible when the ANI Mation is Doneanim.addlistener (new Animatorlisteneradapter () {    @Override public    void Onanimationend (Animator Animation) {        super.onanimationend (animation);        Myview.setvisibility (view.invisible);    }}); /Start the Animationanim.start ();

customizing activity conversion Effects

Activity transitions provide visual connections between different states in the material design program by acting on or converting to common elements. You can customize animations for entering or exiting transitions, sharing the effect of the transitions between different activity.
Entering the transition determines how the view in activity enters the scene. For example, when bursting into transition, the view flies from the outside of the screen to the middle of the screen into the scene.

Exiting the transition determines how the view in activity exits the scene. For example, in the burst exit transition effect, the view exits the scene from the middle.
The shared element transition determines how views shared between two activity transitions between two activity. For example, two activity has a same picture, in different positions and different sizes, changeimagetransform (Picture transform change) lets the shared element smooth panning and zooming the picture between two activity.

Android 5.0 (API 21) provides the following entry and exit effects:

• Explode (burst)-Moves the view from the middle of the scene into or out
• Slide (swipe)-the view enters or exits from one edge of the scene
• Fade (fade in)-Adds or removes a view from a scene by changing his transparency

All transitions inherit Visibility the class, so it is supported as an entry or exit transition effect.

For more details, see Transition The API Guide for the class.

Android5.0 (API 21) also supports shared element transition effects:

• Changebounds-Change the layout bounds of the target view
• Changeclipbounds-Crop the target view boundary
• Changetransform-Change the zoom scale and rotation angle of the target view
• Changeimagetransform-Change the size and scale of the target image

When you start a transition animation between activity in your program, the default Crossfade effect is activated between two activity.

A shared element transition effect

Specify transition effects

First, use the properties to turn on the android:windowContentTransitions content transition effect in the window using a style inherited from material theme. You can also first enter, exit, and share the effect of the element in the style definition:

<style name= "Baseapptheme" parent= "android:Theme.Material" >  <!--Enable window content transitions-- >  <item name= "android:windowcontenttransitions" >true</item>  <!--specify enter and exit Transitions--  <item name= "android:windowentertransition" > @transition/explode</item>  <item name= "Android:windowexittransition" > @transition/explode</item>  <!--specify GKFX Element Transitions--  <item name= "android:windowsharedelemententertransition" >    @transition/ change_image_transform</item>  <item name= "android:windowsharedelementexittransition" >    @ Transition/change_image_transform</item></style>

The transitions in the example are change_image_transform defined as follows:

<!--res/transition/change_image_transform.xml--><!--(see also GKFX transitions below)-->< Transitionset xmlns:android= "Http://schemas.android.com/apk/res/android" >  <changeImageTransform/> </transitionSet>

changeImageTransformThe element corresponds to the ChangeImageTransform class. For more information, see Transition the API Guide.

To enable the window content transition effect in your code, use the Window.requestFeature() method:

Inside your activity (if you do not enable transitions in your theme) GetWindow (). Requestfeature (window.feature_content _transitions);//Set an Exit Transitiongetwindow (). Setexittransition (New Explode ());

Define the transition effect in your code, using the following method, and passing an Transition object:

• Window.setentertransition ()
• Window.setexittransition ()
• Window.setsharedelemententertransition ()
• Window.setsharedelementexittransition ()

setExitTransition()And setSharedElementExitTransition() methods define the exit transition effect for the call activity, setEnterTransition() and the setSharedElementEnterTransition() method enters the transition effect for the invoked activity definition.

To achieve a complete transition, window content transitions must be enabled on both incoming and exiting two activity. Otherwise, the activity being invoked will start exiting the transition and you will see the window transitions (such as zooming, or fading out).

The faster the start of a transition, use the Window.setAllowEnterTransitionOverlap() method in the called activity. This gives you a more exciting transition effect.

Open activity using transitions

If you turn the transition on for an activity and set an exit transition, the transition effect is activated when you open other activity, like this:

StartActivity (Intent,        activityoptions.makescenetransitionanimation (this). Tobundle ());

If you set the transition animation to the second activity, the transition will also be activated when the second activity starts. When you start other activity, if you need to disable the transition effect, provide a null bundle option for the.

Open an activity that contains a shared element

Use a scene transition animation to include a shared element between two activity:

1. Turn on window content transitions in theme
2. Specify a shared element transition effect in the style
3. Defining a transition style in XML
4. Assign an identical name to the shared element in the two activity's style file use android:transitionName attribute
5. Use the ActivityOptions.makeSceneTransitionAnimation() method.

Get the element that receives the click eventfinal View imgcontainerview = Findviewbyid (R.id.img_container);//Get the  Common element for the transition in this activityfinal View Androidrobotview = Findviewbyid (R.id.image_small);//define A Click Listenerimgcontainerview.setonclicklistener (New View.onclicklistener () {    @Override public    Void OnClick (view view) {        Intent Intent = new Intent (this, activity2.class);        Create the transition animation-the images in the layouts        //of both activities is defined with Android:transiti Onname= "Robot"        activityoptions options = Activityoptions            . Makescenetransitionanimation (This, Androidrobotview, "robot");        Start the new Activity        startactivity (Intent, Options.tobundle ());}    );

For dynamically shared views generated in code, use the ' View.settransitionname () method to specify the same name in the two activity.

When the second activity is completed, if you need to reverse the transition animation, use the Activity.finishaftertransition () method instead of Activity.finish ()

Open an activity with multiple shared elements

Use a scene transition animation to include more than one shared element between two activity, defining all of the shared elements in two activity using android:transitionName attributes (or using the View.settransitionname () method in all activity), and create a Activityoptions object such as the following:

Activityoptions options = Activityoptions.makescenetransitionanimation (This,        pair.create (View1, "agreedName1") ,        pair.create (View2, "agreedName2"));

Using curve Motion

In Material design, animation relies on time interpolation and spatial movement pattern curves. In android5.0 (API 21) and later, you can customize the time curve and move the curve for animations.

PathInterpolatorClass is a new interpolator based on Bézier curves or path objects. This interpolator defines the curve motion on the square of the 1*1, with the (0,0) and (zero) points as the anchor points, according to the parameter control points. You can also use the XML file to define a path interpolator, such as:

<pathinterpolator xmlns:android= "http://schemas.android.com/apk/res/android"    android:controlx1= "0.4"    android:controly1= "0"    android:controlx2= "1"    android:controly2= "1"/>

In the Material design specification, the system provides an XML resource for three basic curves:

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml

We can Animator.setInterpolator() PathInterpolator set it up by passing an object.

ObjectAnimatorClass has a new construction method, you can use two at a time or use path independently of the coordinate animation. For example, the following animation uses a Path object to move the X and Y properties of a view:

Objectanimator Manimator;manimator = objectanimator.offloat (view, view.x, view.y, path); .... Manimator.start ();

View state Changes Animation

Statelistanimator defines the animation to run when the state of the view changes, the following example is how to define a statelistanimator animation in XML:

Attach a custom view-state animation to the view, using selector an element to define an animation in an XML file in this case, assign an animation usage property to the view android:stateListAnimator . Use in code, use AnimationInflater.loadStateListAnimator() methods, and use View.setStateListAnimator() methods.

When your theme is an inherited material theme, the button has a Z animation by default. If you need to avoid this animation, set the android:stateListAnimator property to be @null able.

AnimatedStateListDrawableThe class allows you to create a drawing diagram in the associated view state change. Some of the system components of android5.0 use these animations by default. Here's an example of how to define one in an XML file AnimatedStateListDrawable :

Emoji Vector Animation

You can draw a vector graph without distortion when stretched. AnimatedVectorDrawableclass allows you to animate on a vector graph that can be drawn.

You typically need to define a moving vector diagram in three XML files:

A vector diagram uses <vector> elements, which are placed res/drawable/ below.
A moving vector diagram uses <animated-vector> elements, which are placed res/drawable/ below.
One or more animated objects use <objectAnimator> elements, which are placed res/anim/ below.

Movable vectors can be used <group> and <path> elements. An <group> element defines a series of paths or subgroups that <path> define the path to which a drawing can be drawn.

When you define a vector-ready graph that you want to animate, use android:name attributes to specify a unique name for each group and path so that you can find them from the definition of the animation. Like what:

<!--res/drawable/vectordrawable.xml--><vector xmlns:android= "http://schemas.android.com/apk/res/ Android "    android:height=" 64DP "    android:width=" 64DP "    android:viewportheight=" "    android: Viewportwidth= ">    <group        android:name=" Rotationgroup "android:pivotx="        300.0 "        android: Pivoty= "300.0"        android:rotation= "45.0" >        <path android:name=            "V"            android:fillcolor= "# 000000 "            android:pathdata=" m300,70 l 0,-70 70,70 0,0-70,70z "/>    </group></vector>

Movable vector drawing find these paths and group by just speaking the name of the definition:

<!--res/drawable/animvectordrawable.xml--><animated-vector xmlns:android= "http://schemas.android.com/ Apk/res/android "  android:drawable=" @drawable/vectordrawable ">    <target        android:name=" Rotationgroup "        android:animation=" @anim/rotation "/>    <target        android:name=" V "        android: animation= "@anim/path_morph"/></animated-vector>

The definition of an animation is represented in Objectanimator and Animatorset objects. The first animation in this example is to have the target group rotate 360 degrees:

<!--res/anim/rotation.xml--><objectanimator    android:duration= "6000"    android:propertyname= " Rotation "    android:valuefrom=" 0 "    android:valueto="/>

The second example of an animation is to turn a vector drawing from one shape to another. All paths must be compatible with transformations: they must have the same number of commands and each command must have the same parameters.

<!--res/anim/path_morph.xml--><set xmlns:android= "http://schemas.android.com/apk/res/android" >    <objectanimator        android:duration= "android:propertyname="        pathdata "android:valuefrom="        M300 , l 0,-70 70,70 0,0   -70,70z "        android:valueto=" m300,70 l 0,-70 70,0  0,140-70,0 z "        android:valuetype=" PathType "/></set>

For more information, see AnimatedVectorDrawable the API Guide.

PS PostScript

This series is finally finished, to tell the truth basically most are translated by Google's official documents. Because of the time problem, coupled with their own English is bad enough, the recent slow. However, such a down, plus some of their own code exercises, for the material design can be basically used. Unfortunately, most of the style is not backward compatible, had to wait 5.

There are some big God in the Internet has been open source some open source components, we can take this curve to salvation, the next time in a special collation.

This article references: http://developer.android.com/training/material/animations.html

Original address: http://blog.isming.me/2014/11/13/creating-app-with-material-design-five-animations/, reproduced please indicate the source.

Create material Design-style Android apps-using custom animations