58 implementation of loading animations in the same city (Android property animation)

Recently saw the 58 new version of the app, inside or do a lot of animation effects, which I see loading data when a load animation is more fun, try to do a bit, first look at the effect

A lot of people see this, the first question is how the shadow part of the bottom is realized? In fact, if you really want to do it yourself, this problem is not a problem, and the real difficulty is how to control the picture rise when the speed slows down, and the speed of the decline, of course, this problem can only be found in the hands-on process.
It's still going to follow the steps.
1. Realize the layout of the whole Loadingview

 Public  class loadinglayout extends relativelayout {     Public Loadinglayout(Context context) { This(Context,NULL); } Public Loadinglayout(context context, AttributeSet attrs) { This(Context, Attrs,0); } Public Loadinglayout(context context, AttributeSet attrs,intDEFSTYLEATTR) {Super(Context, attrs, defstyleattr);//Add the required slices and arrange them according to your needsInitview (GetContext ()); }}

private void Initview (context context) {/ * Fixed these pictures with a size of 28 DP values * /int viewsize = (int) ( -* Getresources (). Getdisplaymetrics(). Density+. 5F;        / * Create a view*/that displays a circular pictureMcircleview = new View (context);        / * Set parameters * /Relativelayout. LayoutparamsCircleparams = new Layoutparams (viewsize, Viewsize);        / * Let him center the display horizontally * /Circleparams. AddRule(Relativelayout. CENTER_horizontal, Relativelayout. TRUE);Mcircleview. Setlayoutparams(Circleparams);        / * Set background picture * /Mcircleview. Setbackgroundresource(R. Mipmap. Loading_yuan);        / * Set the ID, here is the function for the following shadow arrangement, need to use this view as a reference object * *Mcircleview. SetId(R. ID. Action_bar_root);        / * Create a view*/that shows a square pictureMrectview = new View (context);Relativelayout. LayoutparamsRectparams = new Layoutparams (viewsize, Viewsize);Rectparams. AddRule(Relativelayout. CENTER_horizontal, Relativelayout. TRUE);Mrectview. Setlayoutparams(Rectparams);Mrectview. Setbackgroundresource(R. Mipmap. Loading_fangxing);        / * Create a view*/that displays a triangle pictureMtriangleview = new View (context);Relativelayout. LayoutparamsTriangleparams = new Layoutparams (viewsize, Viewsize);Triangleparams. AddRule(Relativelayout. CENTER_horizontal, Relativelayout. TRUE);Mtriangleview. Setlayoutparams(Triangleparams);Mtriangleview. Setbackgroundresource(R. Mipmap. Loading_sanjiao);        / * Create a imageview*/that shows the bottom shadow pictureMbottomview = new ImageView (context);Relativelayout. LayoutparamsBottomparams = new Layoutparams (viewgroup. Layoutparams. WRAP_content, ViewGroup. Layoutparams. WRAP_content);        / * Set Horizontal Center * /Bottomparams. AddRule(Relativelayout. CENTER_horizontal, Relativelayout. TRUE);        / * Set below the circular picture * /Bottomparams. AddRule(Relativelayout. BELOWR. ID. Action_bar_root);Mbottomview. Setlayoutparams(Bottomparams);Mbottomview. Setbackgroundresource(R. Mipmap. Loading_bottom);        / * View centered in the entire layout * /Setgravity (Gravity. CENTER);        / * Add view*/AddView (Mcircleview);AddView (Mrectview);AddView (Mtriangleview);AddView (Mbottomview);Mrectview. Setvisibility(INVISIBLE);Mtriangleview. Setvisibility(INVISIBLE);}

Here, the first step is completed, the normal display of the data we want, next look at the second step,

2, for these several View animation, let them all move, here to say the bottom shadow of the implementation principle, in fact, nothing special, as with the other three pictures, through the property animation to change its X-zoom.

private void Startanim () {Log. V("Zgy","=========startanim========");Isanim = True;if (Mcircleview. Getvisibility()! = VISIBLE) {Mcircleview. Setvisibility(VISIBLE);Mrectview. Setvisibility(INVISIBLE);Mtriangleview. Setvisibility(INVISIBLE);}/ * Animated collection of round pictures * /Mcircleanim = new Animatorset ();        / * Set execution duration 800ms*/Mcircleanim. Setduration( -L;        /* Set the number of animation to play, move animation and Bottom Shadow drop animation */Mcircleanim. Playtogether(Translationanim (Mcircleview), Bottomanim ());        / * Start animation * /Mcircleanim. Start();        / * Set Animation listener events * /Mcircleanim. AddListener(Mcirclelistener);Mrectanim = new Animatorset ();Mrectanim. Setstartdelay( -L;Mrectanim. Setduration( -L;Mrectanim. Playtogether(Translationanim (Mrectview), Bottomanim (), Rotationanim (Mrectview));Mrectanim. Start();Mrectanim. AddListener(Mrectlistener);Mtriangleanim = new Animatorset ();Mtriangleanim. Setstartdelay( theL;Mtriangleanim. Setduration( -L;Mtriangleanim. Playtogether(Translationanim (Mtriangleview), Bottomanim (), Rotationanim (Mtriangleview));Mtriangleanim. Start();Mtriangleanim. AddListener(Mtrianglelistener);

Here, the animation effect has been realized, to see

But the total feeling effect is not right, the general thing down, give the feeling is, also down the speed faster, and here just do a constant change, that good, we have to change the interpolator, because here the animation is from the bottom up and down is a complete animation, its value is:

 Manimtransvaluerec = new  float  [7 ];        Manimtransvaluerec[0 ] = 0f ;        Manimtransvaluerec[1 ] =-50f ;        Manimtransvaluerec[2 ] =-100f ;        Manimtransvaluerec[3 ] =-150f ;        Manimtransvaluerec[4 ] =-100f ;        Manimtransvaluerec[5 ] =-50f ; Manimtransvaluerec[6 ] = 0f ;  

So when we set the Interpolator, want to set the first deceleration and then accelerate the interpolator, but, unfortunately, the acceleration interpolator has, deceleration interpolator has, the first acceleration and deceleration of the interpolator also has, is not provided first deceleration and then accelerate the interpolator, but it doesn't matter, we achieve A;
To implement the Interpolator, you are actually putting

Public interface Timeinterpolator {/** * Maps a value representing theElapsed fraction ofAn animation toA value thatRepresents * theInterpolated fraction. This interpolated value is  ThenMultiplied by  theChangeinch* Value ofAn animation toDerive theAnimated value at  theCurrent elapsed animation Time. * * @param input A valuebetween 0  and 1.0indicating our current point *inch  theAnimationwhere 0Represents theStart and 1.0Represents * the End* @returnThe interpolation value. This value can is more than1.0  for* Interpolators which overshoot their targets,or Less than 0  for* Interpolators thatUndershoot their targets. */float Getinterpolation (float input);}

Convert the input value in to another float,

If nothing is done, it is a linear change, that is, a constant change.

/** * An interpolator where the rate of change is constant * */publicclass LinearInterpolator implements Interpolator {    publicLinearInterpolator() {    }    publicLinearInterpolator(Context context, AttributeSet attrs) {    }    publicfloatgetInterpolation(float input) {        return input;    }}

Let's take a look at the interpolator that accelerates and slows down.

/** * An interpolator where the rate of change starts and ends slowly but * accelerates through the middle. * */ Public  class acceleratedecelerateinterpolator implements interpolator {     Public Acceleratedecelerateinterpolator() {    }@SuppressWarnings({"Unuseddeclaration"}) Public Acceleratedecelerateinterpolator(context context, AttributeSet attrs) {    } Public float getinterpolation(floatInput) {return(float) (Math.Cos (input +1) * Math.PI)/2.0f) +0.5F }}

How to achieve the first deceleration after accelerating the interpolator, according to the above figure we can know, to achieve the effect we want, the curve between the 0~0.5 should be convex up, and in the 0.5~1 between should be concave down, and just to the contrary, such a curve how to achieve it, to see a picture

The film is made up of two parabolic, if the 0~0.5 range to take the parabolic B, the 0.5~1.0 to take a parabolic a, just exactly the curve we want. And according to the High school mathematics knowledge, two times the curve derivation to know, we intercept the curve its speed is the first deceleration and then accelerates.
So the code to achieve the first deceleration and then acceleration is as follows:

 Public Final  class decelerateaccelerateinterpolator implements interpolator {     Public Final float getinterpolation(floatInput) {if(Input <0.5) {return-(Input * (input/2.0f)-input/2.0f); }Else{return 1.0F + (Input * (2.0F * Input)-2.0F * input); }    }}

OK, remember to set the Interpolator for the animation

animator.setInterpolator(new DecelerateAccelerateInterpolator());

The result of the test is the effect of the first pair of dynamic graphs, which is obviously consistent with the visual logic compared with the second dynamic graph.

Click Source Download

58 implementation of loading animations in the same city (Android property animation)