google has opened an interface for viewpager, PageTransformer, to implement viewpager animation. Developers can implement this interface, define the animation they want, and google defines two default animation implementations Official realization.
Implement a common viewpager.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_viewpager" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.luo.androidui.viewpagertest.ViewpagerActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout>
public class MyPagerAdapter extends PagerAdapter { private List list; public MyPagerAdapter(List list) { this.list = list; } @Override public int getCount() { return list.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView((View) list.get(position)); return list.get(position); } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } }
public class ViewpagerActivity extends AppCompatActivity { ViewPager viewPager; int imgid[]=; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_viewpager); viewPager = (ViewPager) findViewById(R.id.viewpager); ArrayList list = new ArrayList(); for (int i=0;i<imgid.length;i++){ ImageView imageView = new ImageView(getApplicationContext()); imageView.setImageResource(imgid[i]); list.add(imageView); } MyPagerAdapter myPagerAdapter = new MyPagerAdapter(list); viewPager.setAdapter(myPagerAdapter); } }
The three-terminal code above makes up a simple viewpager sliding, as shown below 
You can see from the effect map that this is the normal sliding effect of viewpager. Now we use the sliding effect defined by google.
public class ZoomOutPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.85f; private static final float MIN_ALPHA = 0.5f; @Override public void transformPage(View view, float position) { int pageWidth = view.getWidth(); int pageHeight = view.getHeight(); if (position < -1) { // [-Infinity,-1) // This page is way 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 float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); float vertMargin = pageHeight * (1 - scaleFactor) / 2; float horzMargin = 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 way off-screen to the right. view.setAlpha(0); } } }
How to use it in viewpager? Using a set injection function in the viewpager, this implementation is passed into the viewpager.
viewPager.setPageTransformer(true,new ZoomOutPageTransformer());
Operation observation effect: 
As can be seen from the effect, when sliding, item in viewpager has two effects, shrinkage and transparency have changed.
There are judgement conditions in the code
1. position<-1
2. 1<=position<=1
3. position>1
The above condition expression is a bit complicated. Let's simplify it and simplify it as follows:
1. (Infinite small, -1)
2. [-1,1] is equivalent to [-1,0], [0,1]
3. (1, infinity)
When viewpager slides, there are three items, one is the current screen visible item, the other is the left side of the item and the other is the right side of the visible item. As shown in the picture: 
Mainly look at two conditions, [-1,0] means sliding to the right, [-1,0] means sliding to the left, [-1,0] means that the item item displayed on the mobile screen is hidden, [1,0] means sliding to the left, [-1,0] means that the item displayed on the mobile screen is hidden, [right] is displayed on the mobile phone, and the item displayed on the mobile screen is hidden.
//Code snippets excerpted from ZoomOutPage Transformer Log.d("view",view.hashCode()+""); if (position < 0) { view.setTranslationX(horzMargin - vertMargin / 2); } else { view.setTranslationX(-horzMargin + vertMargin / 2); }
When the finger slides, you can see that the view used in the code is different. In the instant, different views are used. When the finger slides, the three item s of "left side", "current" and "right side" are animated. The log s are shown as follows: 
Suppose your finger is now sliding to the left, the above code condition
if(position<0){
Operate on the current item (Processing: From visible on the phone screen to leaving the phone screen)
}else if(position<1){
Operate on the right item (processing: from right invisible to right moving to visible)
}