Detailed Android Material design custom Animation writing _android

New Animation API that allows you to create touch feedback in UI controls, change view state, and toggle a series of custom animations for the activity
Specifically:

• Touch feedback Animation In response to view's touching events
• To hide and display a view's looping display animation
• Toggle animation between two activity
• Animation of more natural curve motion
• Change the animation with view's state to change one or more view properties
• Show status list animation when view state changes

These new animations APIs are built into the standard widget, such as button. You can also use these APIs when customizing view

Animation in material design, for users and the app interactive feedback their action behavior and provide visual consistency. The material theme provides some default animations for buttons and activity transitions, and in android5.0 (API21) and above, allows customization of these animations:

• Touch Feedback Feedback
• Circular Reveal Loop display
• Activity Transitions Activities Transition
• Curved Motion Curve Motion
• View state changes Change
• Customize touches Feedback Custom Touch feedback Animation

In material design, touch feedback provides an instant visual confirmation point of contact when the user interacts with the UI. About the buttons default touch feedback animation, using the Rippledrawable class, transitions between two different states with a ripple (ripple) effect.

In most cases, you need to define its background in the XML definition of view:

• Android:attr/selectableitembackground, there's bound ripples.
• Android:attr/selectableitembackgroundborderless a ripple that extends beyond view: This property is added to the API21

Alternatively, you can use XML to define a rippledrawable type of resource and use a ripple attribute.

You can assign a color to the Rippledrawable object to change its default touch feedback color, using the theme of the Android:colorcontrolhighlight property.
Use the Reveal Effect display effect
the Viewanimationutils.createcircularreveal () method enables you to activate a loop to show or hide a view.
Show:

Previously invisible view View MyView = Findviewbyid (R.id.my_view);
Get the center for the clipping circle int cx = (Myview.getleft () + myview.getright ())/2;

int cy = (myview.gettop () + myview.getbottom ())/2;

Get the final radius for the clipping circle int finalradius = Myview.getwidth (); Create and start the animator for this view//(The start radius is zero) Animator Anim = Viewanimationutils.createci
Rcularreveal (MyView, CX, CY, 0, Finalradius);
Anim.start ();

Hide//Previously visible view Final view MyView = Findviewbyid (R.id.my_view);
Get the center for the clipping circle int cx = (Myview.getleft () + myview.getright ())/2;

int cy = (myview.gettop () + myview.getbottom ())/2;

Get the initial radius for the clipping circle int initialradius = Myview.getwidth (); Create the animation (the final radius is zero) Animator Anim = Viewanimationutils.createcircularreveal (MyView, CX, C

Y, Initialradius, 0); Make the view invisible the animation IS done Anim.addlistener (new Animatorlisteneradapter () {@Override public void Onanimationend (animator animation) {
    Super.onanimationend (animation);
  Myview.setvisibility (view.invisible);

}
});

 Start the animation Anim.start ();

Customize activity Transitions A transition animation that defines an activity

• An enter transition represents the entry scene of the activity. For example, a explode enter transition, represents the views of the entry scene: Fast from the outside to the center of the screen to move.
• An exit transition says the activity leaves the scene. For example, a explode exit transition, which represents the departure scene of views: Spread out from the center of the screen.
• A share transition says it shares their activity transtion among two of the activity. For example, two activity has an identical picture, and the location and size are different, using changeimagetransform, a shared element, to smoothly convert and scale pictures between the activity.

android5.0 (API21) and above, support the Transition (transition) of these effects:

• Explosion--Move the view or from the scene center. Class Explode
• Glide--Move the view or from the edge of a scene. Class Slide
• Fade in--add or remove views from a scene by changing its transparency. Class Fade

These shared elements (all have corresponding class) conversions are also supported:

• Changebounds--view the layout of the boundary changes.
• The clipping boundary of the Changeclipbounds--view is changed.
• Rotation and scaling boundary change of Changetransform--view
• changeimagetransform--the size and scaling changes of the target image.

When enabling active transitions in your application, the default fades in between fade in and the transition is activated to enter and exit the activity.

Specify custom transition animation
first needs to use the Android:windowcontenttransitions property in the style that defines the theme, transitions The declaration uses transitions. You can also define the transitions used:

<?xml version= "1.0" encoding= "Utf-8"?> <resources> <style name= "MyTheme" parent= " 
  @android: Style/theme.material "> 
    <!--enable window content Transitions--> 
    <item name=" Android: Windowcontenttransitions ">true</item> 
    <!--specify enter and exit Transitions--> 
    <item Name= "Android:windowentertransition" > @android:transition/explode</item> 
    <item name= "Android: Windowexittransition "> @android:transition/explode</item> 
    <!--specify shared element transitions-- > 
    <item name= "android:windowsharedelemententertransition" > @android:transition/move</item> 
    <item name= "android:windowsharedelementexittransition" > @android:transition/slide_top</item> 
  </style> 
</resources> 

Note: Each transition XML is defined as a set of change elements
To enable transitions in your code:

Inside your activity (if you are did not enable transitions in your theme)
GetWindow (). Requestfeature (Window.feature_co ntent_transitions);

Set an exit transition
GetWindow (). Setexittransition (New Explode ());
The method of setting transitions in code also has
window.setentertransition ()
window.setexittransition ()
Window.setsharedelemententertransition ()
window.setsharedelementexittransition ()

To make a transitions transition as soon as possible, you can call Window.setallowentertransitionoverlap () in the activity.
Start a activity using transitions use transition start activity
if you want to enable transtions and set to the end of an activity exit transtion, it will be activated when you start another activity in the following manner:

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

When you set the Enter Transtion in another activity, it will be activated when it is started. If you want to disable transitions, then when you start another activity:

StartActivity (Intent,null); To pass NULL options bundle

Start a activity with a shared element starts acitvity

1. Enable window content in the theme
2. Define a shared transition transitions in style
3. Define Transitions XML Resources res/transition
4. Call Android:transitionname= "" in layout to set the name defined in step 3rd
5. Call Activityoptions.makescenetransitionanimation () to generate the corresponding Activityoptions object.

//Get the element that receives the Click event final View Imgcontainerview = findviewb

Yid (R.id.img_container); Get the common element for the transition in the final View Androidrobotview = Findviewbyid (R.id.image_small)

; Define a click Listener Imgcontainerview.setonclicklistener (New View.onclicklistener () {@Override public void Oncl
    Ick (view view) {Intent Intent = new Intent (this, activity2.class); Create the transition animation-the images in the layouts//of both activities, are defined with Android:transiti Onname= "Robot" activityoptions options = activityoptions. Makescenetransitionanimation (This, Androidrobotview, "
    Robot ");
  Start the new Activity startactivity (Intent, Options.tobundle ());

}
}); 

You can use View.settransitionname () in your code to set up a transition animation
to reverse the transition animation when you want to close the second activity, you can invoke the Activity.finishaftertransition () method instead of the Activity.finish ().
Start a activity with multiple shared elements initiate activity using multiple shared elements
If two activity has more than one shared element, start scene transition animation between them, and use Android:transitionname in their layout ( or call View.settransitionname () in the code in the activity) to define it and create a Activityoptions object as follows:

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

Use curved Motion using curve motion
animations in material design depend on the time insertion value of the curve and the spatial motion mode. In android5.0 (API21) and above, you can customize the animation time curve and curve motion mode.

The Pathinterpolator class is a new plug-in that is based on a Bezier curve or path object. This plug-in specifies a 1 X1 square motion Curve, which uses (0,0) as the anchor, (1,1) as the control point, as the constructor's parameter. You can also define an XML resource for a path interpolator:

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

The system provides three basic curves, XML resources:

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

You can use the Pathinterpolator object as an argument to the Animator.setinterpolator () method.

The Objectanimator class has a new constructor that enables you to activate coordinates to use two or more attributes along a path. For example, the following animator uses a path object to manipulate the X and Y properties of view at the same time:

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

Animate view state Changes Change animation

The Statelistanimator class allows you to define the state changes of the animation Run-time view. The following example shows how to define a Statelistanimator in XML:

 <!--animate the Translationz property ' A view when pressed--> <selector xmln S:android= "Http://schemas.android.com/apk/res/android" > <item android:state_pressed= "true" > <set> & Lt;objectanimator android:propertyname= "Translationz" android:duration= "@android: Integer/config_shortanimtime" an
       Droid:valueto= "2DP" android:valuetype= "Floattype"/> <!--you could have other Objectanimator Here for "X" and "Y", or other properties--> </set> </item> <item android:state_enabled= "true" a Ndroid:state_pressed= "false" android:state_focused= "true" > <set> <objectanimator android:propertyname= "Translationz" android:duration= "android:valueto=" "0" android:valuetype= "Floattype"/> </set> & lt;/item> </selector> 

In the example above, a view state animation is added for one view, an XML resource using the selector element is defined, and the Android:statelistanimator property of the view is assigned. To specify a view-state animation in your code, use Animationinflater.loadstatelistanimator () to load the XML resource and use View.setstatelistanimator () Assign it to view.
When your theme inherits the material theme, the button defaults to the Z animation. To avoid this behavior in your button, set the Android:statelistanimator property value to null. The
Animatedstatelistdrawable class allows you to create a picture to display the state of the associated view change animation. Some system widgets that use these animations by default on 5.0. The following example shows how to define a animatedstatelistdrawable as an XML resource:

 <!--res/drawable/myanimstatedrawable.xml--> xmlns: Android= "Http://schemas.android.com/apk/res/android" > <!--provide a different drawable for each state--> &L T;item android:id= "@+id/pressed" android:drawable= "@drawable/drawablep" android:state_pressed= "true"/> <item Android:id= "@+id/focused" android:drawable= "@drawable/drawablef" android:state_focused= "true"/> <item Android:id= "@id/default" android:drawable= "@drawable/drawabled"/> <!--Specify a transition--> <tran Sition android:fromid= "@+id/default" android:toid= "@+id/pressed" > <animation-list> <item Android:dur ation= "android:drawable=" @drawable/dt1 "/> <item android:duration=" android:drawable= "@drawable/dt2"/&
      Gt ... </animation-list> </transition> ... </animated-selector> 

Animate Vector drawables Image animation
Vector pictures are scalable without distortion. The Animatedvectordrawable class allows you to move a vector diagram.
It is common to define dynamic vector graphs in three kinds of XML:

• Using vector maps of <vector> elements, in res/drawable/
• A dynamic vector graph, using <animated-vector> elements, in the res/drawable/
• One or more object animator, using <objectAnimator> elements, in res/animator/

Vector graphs can be defined by attribute elements that have <group> and <path>,<group> define a <path> set, or the child <group>,<path> defines the path to draw.

When you define a vector diagram, you can assign a name to <group> and <path>, as shown in the following example:

<!--res/drawable/vectordrawable.xml-->
<vector xmlns:android= "http://schemas.android.com/apk/res/ Android "
  android:height=" 64DP "
  android:width=" 64DP "
  android:viewportheight="
  : 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>

In Vector animation, refer to the name of the vector map 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 following example represents a Objectanimator or Animatorset object: The action is rotated 360 degrees

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

The following example shows the vector map path from one graph to another. The two gradient paths must be consistent: they must have the same number of commands and the same number of parameters for each command:

<!--res/anim/path_morph.xml-->
<set xmlns:android= "Http://schemas.android.com/apk/res/android" >
  <objectanimator
    android:duration= "3000"
    android:propertyname= "Pathdata"
    android:valuefrom= "M300,70 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>