Android5.0 new features detailed explanation of the brand-new animation _android

In material design, the user interacts with the app to feedback their actions and provide visual continuity. The material theme provides some default animations for the transitions of controls and activity, and allows you to customize these animations on Android L:

Touch Feedback Feedback

Circular Reveal Round Display

Curved Motion Curve Motion

View state changes Change

Vector drawables Image Animation

Activities Transitions Activity transitions

Touch Feedback

Touch feedback refers to a visual interaction of the user when touching the control, which is usually highlighted by the press color before Android L, but it is not as vivid as animation because it is an instantaneous change of effect.

The Rippledrawable class is used in Android L, and a water ripple diffusion effect is used to transition between two different states.

Using the material design style application, the button defaults with the effect. In addition to the default effects, the system provides two other effects, and we only specify the background of the button as:

? android:attr/selectableitembackground '
? android:attr/selectableitembackgroundborderless '

Any view in a clickable state can use rippledrawable to achieve water ripple effects.

We can also adjust the animation color by setting the Rippledrawable color property, and the system default color is one of the theme's attribute colors:

Android:colorcontrolhighlight, so we can change the default water ripple color uniformly by modifying the color value. Android:coloraccent can modify the check color of the checkbox, please refer to the topic for more color settings.

The system's three kinds of touch feedback are constructed from XML and are as follows:

Default:

<ripplexmlns:android= "http://schemas.android.com/apk/res/android"
android:color= "? android:attr/ Colorcontrolhighlight ">
<item>
<inset
android:insetleft=" 4DP "
android:insettop=" 6DP "
android:insetright=" 4DP "
android:insetbottom=" 6DP ">
<shape android:shape=" Rectangle ">
<corners android:radius= "2DP"/>
<solid android:color= "Android:attr/colorbuttonnormal"/>
<padding android:left= "8DP"
android:top= "4DP"
android:right= "8DP"
android:bottom= "4DP"/ >
</shape>
</inset>
</item>
</ripple>

? android:attr/selectableitembackground

<ripplexmlns:android= "http://schemas.android.com/apk/res/android"
android:color= "? android:attr/ Colorcontrolhighlight ">
<item android:id=" @android: Id/mask ">
<color android:color=" @android: Color/white "/>
</item>
</ripple>

? android:attr/selectableitembackgroundborderless

<ripple xmlns:android= "http://schemas.android.com/apk/res/android"
android:color= "? android:attr/ Colorcontrolhighlight "/>

Code settings

Rippledrawablecolorstatelist statelist = Getresources (). Getcolorstatelist (R.color.tint_state_color);
Rippledrawable rippledrawable = new rippledrawable (statelist,null,null);
View.setbackground (rippledrawable);

Round display

We usually show or hide a view, before Android L, this is a stiff instantaneous change action, and now there's a new API that provides a rounded display or hidden animation effect for this effect.

Revealanimator and previous animation use is no different, you can also set the listener and accelerator to achieve a variety of effects, the animation is mainly used to hide or display a view, change the size of the view and other transition effects.

Create an animation through Viewanimationutils.createcircularreveal, which accepts 5 parameters

View: Views of actions

CenterX: Center point x for animation start

CenterY: Center point y of the animation start

Startradius: Animation Start radius

Startradius: Animation End Radius

Zoom down the center of the animation

Animatoranimator = Viewanimationutils.createcircularreveal (
view,//action views
view.getwidth ()/2,//animation Start center point x
view.getheight ()/2,//animation begins with the center point y
view.getwidth (),//animation start radius
0//Animation end radius
);
Animator.setinterpolator (Newlinearinterpolator ());
Animator.setduration (1000);
Animator.start ();

Circular animation extending from the upper-left corner

Animatoranimator = Viewanimationutils.createcircularreveal (
view,0,0,0, (float) math.hypot (View.getWidth (), View.getheight ()));
Animator.setduration (1000);
Animator.start ();

Curve motion

Curve Animation before Android L we can realize the motion trajectory algorithm by inheriting the applytransformation function of the displacement animation, but the operation is more complicated:

By inheriting the displacement animation to rewrite the applytransformation to modify the trajectory of the displacement

Public Classarctranslateanimationextendsanimation {private float mfromxvalue,mtoxvalue,mfromyvalue,mtoyvalue;
private float Mfromxdelta,mtoxdelta,mfromydelta,mtoydelta;
Private PointF mstart,mcontrol,mend; Public Arctranslateanimation (Floatfromxvalue, Floattoxvalue, Floatfromyvalue, floattoyvalue) {MFromXValue =
Fromxvalue;
Mtoxvalue = Toxvalue;
Mfromyvalue = Fromyvalue;
Mtoyvalue = Toyvalue; } protected void Applytransformation (floatinterpolatedtime,transformationt) {float dx =calcbezier (interpolatedtime,
Mstart.x,mcontrol.x,mend.x);
float dy =calcbezier (INTERPOLATEDTIME,MSTART.Y,MCONTROL.Y,MEND.Y);
T.getmatrix (). Settranslate (Dx,dy); } public void Initialize (Intwidth, intheight, Intparentwidth, intparentheight) {super.initialize (Width,height,
Parentwidth,parentheight);
Mfromxdelta = Resolvesize (absolute,mfromxvalue,width,parentwidth);
Mtoxdelta = Resolvesize (Absolute,mtoxvalue,width, parentwidth);
Mfromydelta = Resolvesize (absolute,mfromyvalue,height,parentheight); Mtoydelta = ResoLvesize (Absolute,mtoyvalue,height, parentheight);
Mstart =newpointf (Mfromxdelta,mfromydelta);
MEnd =newpointf (Mtoxdelta,mtoydelta);
Mcontrol =newpointf (Mfromxdelta,mtoydelta); Private Long Calcbezier (Floatinterpolatedtime, floatp0, FLOATP1, float p2) {return Math.Round (Math.pow
Edtime) (2) * p0) + (2 * (1-interpolatedtime) * Interpolatedtime * p1) + (Math.pow (interpolatedtime,2) * p2); }
}

Now we have a simpler way of implementing it.

Objectanimator added path to build animations, and can animate the X,y two properties at the same time, we only use the path to specify a curve, you can make the curve of animation, the use of quadto/cubicto to draw Bezier curves, You can also use ArcTo to draw an ordinary arc

Added Pathinterpolator animation inserts, new inserts based on Bezier curves or path objects. This plug-in specifies a 1x1 square motion curve that uses (0,0) as an anchor, (1,1) as a control point, as a parameter to the constructor.
View state changes

Android L in the original picture selector and color selector on the enhanced, not only the control can display different background pictures according to different states, but also in the two states when switching to specify an animation, to increase the transition effect, attract users eyeball, to highlight the key content.

Statelistanimator class and picture selector, color selector similar, can be based on view state changes to render different animation effects, through XML we can build corresponding to different states of the animation collection, the use of the way is very simple, in the corresponding state to specify a property animation can:

<selectorxmlns:android= "Http://schemas.android.com/apk/res/android" >
<item android:state_pressed= " True ">
<set>
<objectanimator android:propertyname=" Translationz "
android:duration=" 200 "
android:valueto= "20DP"
android:valuetype= "Floattype"/>
</set>
</item>
< Item android:state_enabled= "True" android:state_pressed= "false" >
<set>
<objectanimator Android:propertyname= "Translationz"
android:duration= "android:valueto="
0 "
android: Valuetype= "Floattype"/>
</set>
</item>
</selector>

In XML, a state animation is specified by Android:statelistanimator, which can be animated by Animationinflater.loadstatelistanimator (). and use View.setstatelistanimator () to assign it to view.

You can specify a collection of multiple property animations in the process of state transitions, and after inheriting the material theme, the button defaults to the Z-property animation. If you want to cancel this default state, you can specify a state animation as null.

In addition to the Statelistanimator class specifies the property animation for state transitions, you can specify frame animations for state transitions by animatedstatelistdrawable:

<animated-selectorxmlns:android= "Http://schemas.android.com/apk/res/android" >
<item android:id= "@+ Id/pressed "android:drawable=" @drawable/btn_check_15 "
android:state_pressed= true"/>
<item Android : id= "@+id/normal" android:drawable= "@drawable/btn_check_0"/> <transition android:fromid= "
@+id/normal" Android:toid= "@+id/pressed" >
<animation-list>
<item android:duration= "android:drawable=" @drawable/btn_check_0 "/>
<item android:duration=" android:drawable= "@drawable/btn_check_1"/>
<item android:duration= android:drawable= "@drawable/btn_check_2"/>
</animation-list>
</transition>
</animated-selector>

Vector graphic Animation

We learned the vector graph, animatedvectordrawable class allows you to make a vector diagram move. Vector Graph animation is more smooth than frame animation to show the change process of the picture, and regardless of memory footprint, or package volume occupancy is better than frame animation. It usually takes three steps to define a vector graph animation:

Define a vector map in the drawable resource directory

<vectorxmlns: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 l0,-70 70,70 0,0-70,70z "/>
</group>
</vector>

Top a objectanimator in the Anim and modify the path of the vector map in the animation

<setxmlns:android= "Http://schemas.android.com/apk/res/android" >
<objectanimator
android: duration= "3000"
android:propertyname= "Pathdata" "android:valuefrom=" m300,70 l0,-70 70,70 0,0-70,70z
"
android:valueto= "m300,70 l0,-70 70,0 0,140-70,0z" android:valuetype= "PathType"
/>
</set>

Define a animated-vector under drawable and point the drawable to the vector graph, assigning the animation in target to the previously defined Objectanimator

<animated-vectorxmlns:android= "http://schemas.android.com/apk/res/android"
android:drawable= "@drawable Vector_drawable ">
<target
android:name=" V "
android:animation=" @anim/vector_anim "/>
</animated-vector>

Transitions Animation

Before Android L, we could call overridependingtransition after startactivity to specify the animation of the activity's transitions. Now Android is bringing us a more brilliant transition animation.

The new transition animation is divided into two main categories, one is the ordinary transitional animation, the other is the transition animation of the shared elements.

To use the new transitions animation, you can inherit the material design theme and specify it in the style style:

<stylename= "Defaulttheme" parent= "android:Theme.Material" > <!--allowed to use transitions--> <item " Android:windowcontenttransitions ">true</item> <!--specifies transitions--> <item name=" When entering, exiting, returning, and re-enter. Android:windowentertransition "> @transition/explode</item> <item name=" Android:windowexittransition " > @transition/explode</item> <item name= "android:windowreturntransition" > @transition/explode</ item> <item name= "android:windowreentertransition" > @transition/explode</item> <!--specify entry, exit, return, Shared transitions--> <item name= "android:windowsharedelemententertransition" > @transition/change</ item> <item name= "android:windowsharedelementexittransition" > @transition/change</item> <item Name= "Android:windowsharedelementreturntransition" > @transition/change</item> <item name= "Android: Windowsharedelementreentertransition "> @transition/change</item> </style>

You can also set code in the OnCreate method of the activity:

Allow the use of Transitions
getWindow (). Requestfeature (window.feature_content_transitions);
Specifies the Transitions
getWindow (). Setentertransition (Newexplode ()
) when entering, exiting, returning, and re-enter. GetWindow (). Setexittransition (Newexplode ());
GetWindow (). Setentertransition (Newexplode ());
GetWindow (). Setexittransition (Newexplode ());
Specifies the shared Transitions
getWindow (). Setsharedelemententertransition (Newchangetransform ()
) when entering, exiting, returning, and entering. GetWindow (). Setsharedelementexittransition (Newchangetransform ());
GetWindow (). Setsharedelementreturntransition (Newchangetransform ());
GetWindow (). Setsharedelementreentertransition (Newchangetransform ());

General Transitions Animation

All inherited from visibility classes can be used as an excessive animation to enter and exit. If we want to customize the animation effect when entering and exiting, simply inherit the visibility, overload the Onappear and Ondisappear methods to define the animation that goes into the drink exit. The system provides three default methods:

Explode move or move out of view from the center of the screen

Slide move or move out of view from the edge of the screen

Fade change the transparency of a view

To specify custom entry and exit excessive animations in XML, you need to define the animation first:

<transitionclass= "My.app.transition.CustomTransition"/>

Note: Where Customtransition is your custom animation, it must inherit from visibility.

To start an activity in a normal transition animation, you must pass a activityoptions bundle object in the StartActivity function:

Activityoptionsoptions = activityoptions.makescenetransitionanimation (activity);
StartActivity (Intent,options.tobundle ());

If you want the return to have a transition effect, do not call the finish function in the returned activity, but instead use finishaftertransition to end an activity that waits for the animation to finish before ending the activity.

Shared Transitions Animation

Shared transitions animations are a great choice when two of the activity has some elements that meet. Using a transition animation requires that the same element be set to the same name through Android:transitionname or view.settransitionname so that the system can differentiate between the same elements.

The shared Transitions animation supports the following shared elements:

Changebounds Animate the size of the target view

Changeclipbounds Animate the clipping size of the target view

Changetransform the target view to zoom, rotate, and shift animation

Changeimagetransform Zoom to the target picture

Start a shared element animation by using the following function:

Activityoptionsoptions = Activityoptions.makescenetransitionanimation (Activity,view, "name");
StartActivity (Intent,options.tobundle ());

If you have more than one shared element, you can wrap it through pair:

Activityoptionsoptions = Activityoptions.makescenetransitionanimation (Activity,pair.create (View1, "name1"), Pair.create (View2, "name2"));
StartActivity (Intent,.tobundle ());

If you need to have a transition animation when returning, you also need to use the finish function instead of finishaftertransition to end an activity.

Shared transitions animations can usually be used to determine the appropriate transition animation effects based on the specified elements, do not require additional processing, and can be used to specify the transition animation effects of shared elements.

Combine Transitions animation

We can combine multiple transitions animations to make a more personalized transition effect, in the resource file through the following ways:

<transitionsetxmlns:android= "Http://schemas.android.com/apk/res/android" >
<explode/>
< Transition class= "my.app.transition.CustomTransition"/>
<<changeImageTransform/>
</ Transitionset>

In the code we can combine multiple transitions animations by Transitionset classes:

Transitionsettransitionset =new Transitionset ();
Transitionset.addtransition (Newfade ());
Transitionset.addtransition (Newchangebounds ());

Combinations can animate animations for both normal transitions and shared elements.

Transition animations can also set durations like normal animations, delay execution time, rate inserts, and animation monitoring.

A transition animation usually works for the entire layout, and if we want to implement a transition animation for a particular view, you can set the view as target for the transition animation, so that the transition animation will only work for a particular view. The target of the animation for the shared element needs to be specified as Transitionname

The above is a small set to introduce the new features of the Android5.0 to explain the brand-new animation, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!