Use Viewpager animations to make a different guide page

Even if Google comes from a very early start to set up the interface of the boot page animation, but I now look on the market using the Guide page animation is still very little, do not know why, the thought of material design usage is so little to express the heart plug.
First of all, look at the market's stereotyped guide page effect, Connaught:

It's monotonous, isn't it? I've all been sick and I've seen a copy of the guided page animations:

There is no instant refreshing feeling, the following talk about how to make such a guide page animation.

In fact, starting from Android 3.0 is API 11 Android has come with a pagetransformer interface to achieve Viewpager animation effect and added Setpagetransformer method to customize our own animation effect, It's easy to use:

viewpager.setpagetransformer (false , new  Viewpager.pagetransformer () { @Override  public  void  transformpage  (View page, float  position) {//do Transformat Ion here }});  

Here Setpagetransformer passed two parameters, the first Boolean parameter indicates whether to reverse the animation effect when the two page switch to make the next page at the bottom of the previous page, because Viewpager default next page is drawn on the top of the previous page , here is generally passed true, the second parameter is the focus, here to implement the Pagetransformer interface, and then all of our required animation effects are implemented in Transformpage this interface method, now let's look at this method.

We found that the Transformpage method also has two parameters, the first parameter represents the activity or fragment currently displayed on the screen, regardless, the latter parameter is the focus, this position is not our Guide page page position, Here is a picture to illustrate this position parameter:

Photo source

Google's official interpretation of this parameter is that this parameter indicates the position of a given page relative to the center of the screen, and this parameter changes dynamically with our sliding, the most important thing is that the position parameter is relative to the left edge of our screen, if the current page just fills the entire screen , as shown in the 1 interface, then the position parameter of this page is 0, if a page just from the right edge of the screen, can be understood as the interface between Page 1 and Page 2 is just take hold, then this page position value is 1, if at some point we will page 1 left half , resulting in the middle of the screen half of the page 1 display and half of the page 2 display, when the position value of page 1 is 0.5, page 2 of the position value is 0.5, is relative to the left edge, and the left edge value is fixed 0, is the following situation:

So what is the use of this value, in fact, thanks to this value we can make a better animation effect, to know that the value is dynamic change, with a dynamic change in the value can make dynamic changes in the effect, we can see how Google uses it:

 Public  class Zoomoutpagetransformer implements Viewpager. Pagetransformer {    Private Static Final floatMin_scale =0.85FPrivate Static Final floatMin_alpha =0.5F Public void Transformpage(View view,floatPosition) {intPageWidth = View.getwidth ();intPageHeight = View.getheight ();if(Position <-1) {//[-infinity,-1]            //This page was the off-screen to the left.View.setalpha (0); }Else if(Position <=1) {//[ -1,1]            //Modify The default slide transition to shrink the page as well            floatScalefactor = Math.max (Min_scale,1-Math.Abs (position));floatVertmargin = PageHeight * (1-Scalefactor)/2;floatHorzmargin = PageWidth * (1-Scalefactor)/2;if(Position <0) {View.settranslationx (Horzmargin-vertmargin/2); }Else{View.settranslationx (-horzmargin + vertmargin/2); }//Scale the PAGE down (between Min_scale and 1)View.setscalex (Scalefactor); View.setscaley (Scalefactor);//Fade the page relative to its size.View.setalpha (Min_alpha + (Scalefactor-min_scale)/(1-Min_scale) * (1-Min_alpha)); }Else{//(1,+infinity]            //This page is a-off-screen to the right.View.setalpha (0); }    }}

The actual effect of this code is as follows:

You can see the obvious transformations of scaling and transparency, and let's see how the code uses this position parameter:

if (position < -1// [-Infinity,-1)            // This page is way off-screen to the left.            view.setAlpha(0);

First of all here to determine if the position parameter is negative infinity to-1, that is, at this time the page out of the left edge of the screen is not visible, directly set to transparent

}Else if(Position <=1) {//[ -1,1]            //Modify The default slide transition to shrink the page as well            floatScalefactor = Math.Max(Min_scale,1-Math.ABS(position));floatVertmargin = PageHeight * (1-Scalefactor)/2;floatHorzmargin = PageWidth * (1-Scalefactor)/2;if(Position <0) {View.settranslationx (Horzmargin-vertmargin/2);

Next judge if this page position in between 1 to 1, that is, the most extreme situation is that the page is going to the left to slide out of the screen, or that the page is still on the right edge of the screen is about to slide into our view, then the use of our position parameters, Here Google treats it as a scaling factor to use;

float scaleFactor = Math.max1 - Math.abs(position));

1 - Math.abs(position))The value here is between 0~1, and the code determines the size of the Min_scale and 1 - Math.abs(position)) takes the maximum value, Min_scale is the most defined minimum scaling factor, you can see that this line of code out of the zoom factor is between Min_scale and 1, Then the following code is based on the position position parameter changes to the page's horizontal movement effect, in fact, Viewpager provides quite a number of methods for us to operate, such as: Setscale set the zoom, Setrotation set the rotation effect, And here's the Settranslationx set the horizontal movement effect and so on, combined with position this dynamic parameter can make a lot of unexpected animation, such as the following rotation animation:

The code is as follows:

 Public  classRotatedownpagetransformer implements Viewpager. Pagetransformer {      Private Static Final floatRot_max =20.0FPrivate floatMrot; Public void Transformpage(View view,floatPosition) {LOG.E ("TAG", view +" , "+ Position +"");if(Position <-1)        {//[-infinity,-1]            //This page was the off-screen to the left.Viewhelper.setrotation (View,0); }Else if(Position <=1)//A page slide to page B, page a from 0.0 ~ 1; page b from 1 ~ 0.0{//[ -1,1]            //Modify The default slide transition to shrink the page as well            if(Position <0) {Mrot = (Rot_max * position); Viewhelper.setpivotx (view, view.getmeasuredwidth () *0.5f);                Viewhelper.setpivoty (view, View.getmeasuredheight ());            Viewhelper.setrotation (view, Mrot); }Else{Mrot = (Rot_max * position); Viewhelper.setpivotx (view, view.getmeasuredwidth () *0.5f);                Viewhelper.setpivoty (view, View.getmeasuredheight ());            Viewhelper.setrotation (view, Mrot); }//Scale the PAGE down (between Min_scale and 1)            //Fade the page relative to its size.}Else{//(1,+infinity]            //This page is a-off-screen to the right.Viewhelper.setrotation (View,0); }    }}

Note: Here the Viewhelper class needs to refer to the Nineoldandroids third-party animation library to achieve, the specific things I have packaged in the bottom of the download link, the need for self-access.

more Cool effects
In fact, in addition to position this parameter processing, we can also animate the view, mentioned earlier Transformpage this interface method The first parameter view is currently visible activity or fragment, Then we can also deal with this activity or the internal elements of the fragment to achieve the effect of the inspection animation, a good example:

 Public void Transformpage(View view,floatPosition) {intPageWidth = View.getwidth ();if(Position <-1) {//[-infinity,-1]        //This page was the off-screen to the left.View.setalpha (0); }Else if(Position <=1) {//[ -1,1]Mblur.settranslationx ((float) (-(1-position) *0.5* pagewidth)); Mblurlabel.settranslationx ((float) (-(1-position) *0.5* pagewidth)); Mdim.settranslationx ((float) (-(1-position) * pagewidth)); Mdimlabel.settranslationx ((float) (-(1-position) * pagewidth)); Mcheck.settranslationx ((float) (-(1-position) *1.5* pagewidth)); Mdonebutton.settranslationx ((float) (-(1-position) *1.7* pagewidth));//The 0.5, 1.5, 1.7 values You see here is what makes the view move with a different speed.        //The bigger the number, the faster the view would translate.        //The result float is preceded by a minus because the "the" the "the direction of the opposite movement".Mfirstcolor.settranslationx ((position) * (PageWidth/4)); Msecondcolor.settranslationx ((position) * (PageWidth/1)); Mtint.settranslationx ((position) * (PageWidth/2)); Mdesaturate.settranslationx ((position) * (PageWidth/1));// This is another-do it}Else{//(1,+infinity]        //This page is a-off-screen to the right.View.setalpha (0); }}

Project Address

Finally, attach the entire project address: Project address
Have any questions to discuss the message

Use Viewpager animations to make a different guide page