Add parallax Scrolling (Parallax scrolling) effects to your app's Guide page with Viewpager

• • What is parallax scrolling
  • What is the effect of parallax scrolling?
  • How to realize the parallax scrolling effect
    • 1 the left and right slide of the page by using Viewpager
    • 2 Viewpager have a way to achieve parallaxscrolling?
    • 3 Viewpagerpagetransformer How to use
  • Thinking caused by parallax scrolling effect
  • The above is only personal experience in the development of the collection welcome everyone to shoot bricks

1. What is parallax scrolling?

Parallax Scrolling (parallax scrolling) is a common animation effect. The term parallax is derived from astronomy, but it is also found in everyday life. When you look at the scenery on a speeding train, you will find that the more close you are, the faster the relative movement, and the distant mountains and rivers just move slowly, which is the most common parallax effect. The unique layering of parallax animations brings a very lifelike visual experience, with IOS, Android Launcher, and website as the perfect choice for enhancing the user's visual delight.
Parallax scrolling effect is generally referred to, viewpager sliding when the content element scrolling rate is different, the formation of the element animation dislocation effect. The first time the app opened the boot page is not new, viewpager with a few designers carefully painted pictures, minutes can be done. But there are always people to ordinary things do not ordinary, now the market many applications have appeared parallax animation figure, with the user's finger sliding, feedback to smart, close to the real vision and operation experience, the initial impression of the application is promoted to a very high point.

2. What is the effect of parallax scrolling?

3. How to achieve the parallax scrolling effect? 1). Use Viewpager to slide left and right of the page

It is believed that most Android developers are not unfamiliar with the Viewpager control, which enables simple page-to-side sliding effects and is included in the Android-support-v4.jar Compatibility Pack. In fact, the use of Viewpager can also achieve a simple slide guide page, but to achieve a parallax scrolling effect, you may want to dig deep Viewpager API.

2). Viewpager have a way to achieve parallaxscrolling?

The Parallax scrolling effect is mainly manifested by the difference in the scrolling rate of content elements. For example, sliding 1px in the Viewpager, and a element moving 2px, b element Move 1.5px, this ratio of moving gap, or called parallaxcofficient, that is, parallax coefficient or parallax rate, it is the same interface elements, due to different levels, given the disparity coefficient, the difference in the speed of movement to form the illusion of parallax, this is the effect we want to pursue.
Know the principle is good to do, using Viewpager.onpagechangelistener monitoring interface, implementation of onpagescrolled, onpageselected, onpagescrollstatechanged three methods, Then the dynamic calculation is not.
No! If we calculate the parallax coefficients dynamically in these three methods, how do we make these values work on each sub-view of the page? Do you want to set some translate animations for each of the sub-view? When should it be the first child view to start the animation? So what's the second one? Wait, this method is obviously not reliable! What better solution would that be?
Fortunately Android3.0 later prepared for the Viewpager deformation interface Viewpager.pagetransformer, it provides a method Transformpage (View page, float position), It is precisely for us to complete the Parallax animation tailored. Let's take a look at its source code:

/** * A pagetransformer is invoked whenever a visible/attached page is scrolled. * This offers an opportunity for the application to apply a custom transformation * to the page views using Animation Pro  Perties. * * <p>as Property animation are only supported as of Android 3.0 and forward, * setting a pagetransformer on a Vie Wpager on earlier platform versions would * be ignored.</p> * *  Public  interface pagetransformer {     /** * Apply a property transformation to the given page. * * @param page Apply The transformation to this page * @param position position of page Relat Ive to the front-and-center * position of the pager. 0 is front and center.      1 is a full * page position to the right, and-1 are one page position to the left. */      Public void Transformpage(View page,floatposition); }

It is not difficult to see from the source code, Pagetransformer is triggered when the viewpager is sliding, it opens a door for the view transformation in our custom page. Pagertransformer's comments already illustrate its usefulness-it gives the app an opportunity to set custom animation properties for page swipe. That ' s it!
In the Viewpager source code, we can intuitively see its invocation process:

//viewpager#onpagescrolledif(Mpagetransformer! =NULL) {Final intSCROLLX = Getscrollx ();Final intChildCount = Getchildcount (); for(inti =0; i < ChildCount; i++) {FinalView child = Getchildat (i);FinalLayoutparams LP = (layoutparams) child.getlayoutparams ();if(Lp.isdecor)Continue;Final floatTransformpos = (float) (Child.getleft ()-SCROLLX)/getclientwidth ();    Mpagetransformer.transformpage (Child, Transformpos); }}

3). How is Viewpager.pagetransformer used?

First, we need to understand the meaning of the two parameters of the Transformpage method. Page of course refers to the sliding of the view,position is defined here as float, not usually understand the int position information, but the current sliding state of a representation, such as when sliding to the full screen, the position is 0, and left sliding, So that there is just one on the right side of the screen, position is 1, if the previous night and the next page almost half of the screen, The previous page of the position is-0.5, the next page of Posiotn is 0.5, so according to the value of position we can set the required alpha,x/y information.
Param 1:view Page
From the above code, it is not difficult to see that the page is currently sliding pages, debugging know that each child view is nosavestateframelayout packaging, that is to say Page.getchildat (0) is the actual child of each page View
Param 2:float Position
Position This parameter does not look at the code or the document, always mistakenly think is our well-known integer position, but it is actually a sliding page of a relative proportion, essentially with 1, 2, 3, 4 This position is the same.
For example, the Start page has a total of 6 pages, respectively, a,b,c,d,e,f initial state is a page static, a page position exactly is the 0,b page is 1. Then slide the page (B-a), during which A's position is between [-1, 0],b page is between [0, 1]. But the document of this parameter is simple and not intuitive, compared to the above example, it should be clear now.
Based on the above analysis, we can draw a relatively simple custom transformer, the page (view) to traverse, increment or decrement its parallaxcofficient, in order to get the effect we expect, the specific coefficient settings please refer to the code.

Class Parallaxtransformer implements Viewpager.pagetransformer {floatParallaxcoefficient;floatDistancecoefficient; Public Parallaxtransformer(floatParallaxcoefficient,floatDistancecoefficient) { This. parallaxcoefficient = parallaxcoefficient; This. distancecoefficient = distancecoefficient; }@Override     Public void Transformpage(View page,floatPosition) {floatScrollxoffset = Page.getwidth () * parallaxcoefficient;// ...        //Layer is the ID of collection of views in this page         for(intId:layer) {View view = Page.findviewbyid (ID);if(View! =NULL) {View.settranslationx (Scrollxoffset * position);        } scrollxoffset *= distancecoefficient; }    }}

When the Viewpager is initialized, it can be set.

viewPager = (ViewPager) findViewById(R.id.pager);viewPager.setAdapter(pagerAdapter);viewPager.setPageTransformer(truenew ParallaxTransformer());

4. Thinking caused by parallax scrolling effect

Through the above exploration, in fact, I personally feel that viewpager.pagetransformer above the promising, and not only can do parallax scrolling effect. For example, when we do Parallax animation is the entire page view of the child view set some parallax coefficient to achieve the difference in the scrolling rate of the dislocation effect, however, we can actually just to the entire page view set some of the scene animation, in order to achieve a vivid transition effect. Here is a page to enlarge the effect of the transition, you are welcome to propose more expansion programs.

 Public  class Zoomoutpagetransformer implements Viewpager. Pagetransformer {    Private Static Final floatMin_scale =0.85FPrivate Static Final floatMin_alpha =0.5F@SuppressLint("Newapi") 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 above is only personal experience in the development of the collection, welcome everyone to shoot bricks!

Add parallax Scrolling (Parallax scrolling) effects to your app's Guide page with Viewpager