Add some cool animations to ViewPager and add cool animations to viewpager.

Add some cool animations to ViewPager and add cool animations to viewpager.
ViewPagerWithAnimations

Add animated effects to viewPager and make it compatible with versions earlier than API11

Override ViewPager class

public class MyViewPager extends ViewGroup {...      public void setPageTransformer(boolean reverseDrawingOrder, ViewPager.PageTransformer transformer) {//        if (Build.VERSION.SDK_INT >= 11) {            final boolean hasTransformer = transformer != null;            final boolean needsPopulate = hasTransformer != (mPageTransformer != null);            mPageTransformer = transformer;            setChildrenDrawingOrderEnabledCompat(hasTransformer);            if (hasTransformer) {                mDrawingOrder = reverseDrawingOrder ? DRAW_ORDER_REVERSE : DRAW_ORDER_FORWARD;            } else {                mDrawingOrder = DRAW_ORDER_DEFAULT;            }            if (needsPopulate) populate();//        }    }...}

XML Layout

<com.zhengsonglan.viewpagerwithanimations.UI.MyViewPager        android:id="@+id/main_viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"/>

Animation 1

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {    private static final float MIN_SCALE = 0.85f;    private static final float MIN_ALPHA = 0.5f;    public void transformPage(View view, float position) {        int width = view.getWidth();        int pageWidth = width;        int pageHeight = view.getHeight();        if (position < -1) { // [-Infinity,-1)            // This page is way off-screen to the left.            ViewHelper.setAlpha(view, 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) {                float result1=horzMargin-vertMargin/2;                ViewHelper.setTranslationX(view,result1);            } else {                float result2=-horzMargin + vertMargin / 2;                ViewHelper.setTranslationY(view,result2);            }            // Scale the page down (between MIN_SCALE and 1)            ViewHelper.setScaleX(view,scaleFactor);            ViewHelper.setScaleY(view,scaleFactor);            ViewHelper.setAlpha(view,MIN_ALPHA +                    (scaleFactor - MIN_SCALE) /                            (1 - MIN_SCALE) * (1 - MIN_ALPHA));        } else { // (1,+Infinity]            // This page is way off-screen to the right.            ViewHelper.setAlpha(view,0);        }    }}

Effect

Animation 2

/*** Created by zsl on 2015/2/25. * Animation 2 */public class DepthPageTransformer implements ViewPager. pageTransformer {private static final float MIN_SCALE = 0.75f; public void transformPage (View view, float position) {int pageWidth = view. getWidth (); if (position <-1) {// [-Infinity,-1) // This page is way off-screen to the left. viewHelper. setAlpha (view, 0);} else if (position <= 0) {// [-1, 0] // Use the default slide transition when moving to the left page ViewHelper. setAlpha (view, 1); ViewHelper. setTranslationX (view, 0); ViewHelper. setScaleX (view, 1); ViewHelper. setScaleY (view, 1);} else if (position <= 1) {// (0, 1] // Fade the page out. viewHelper. setAlpha (view, 1-position); // Counteract the default slide transition ViewHelper. setTranslationX (view, pageWidth *-position); // Scale the page down (between MIN_SCALE and 1) float scaleFactor = MIN_SCALE + (1-MIN_SCALE) * (1-Math. abs (position); ViewHelper. setScaleX (view, scaleFactor); ViewHelper. setScaleY (view, scaleFactor);} else {// (1, + Infinity] // This page is way off-screen to the right. viewHelper. setAlpha (view, 0 );}}}

Effect

Animation 3

/*** Created by zsl on 2015/2/25. * animation 3 */public class Animation3Transformer implements ViewPager. pageTransformer {private static final float MAX_ROATE = 20f; public void transformPage (View view, float position) {int width = view. getWidth (); int pageWidth = width; int pageHeight = view. getHeight (); if (position <-1) {// [-Infinity,-1) ViewHelper. setRotation (view, 0);} else if (position <= 1) {// [-1,1] float result = position * MAX_ROATE; ViewHelper. setmediatx (view, pageWidth * 0.5f); ViewHelper. seteffecty (view, pageHeight); ViewHelper. setRotation (view, result);} else {// (1, + Infinity] ViewHelper. setRotation (view, 0 );}}}

Effect

Animation 4

/*** Created by zsl on 2015/2/25. * animation 4 */public class Animation4Transformer implements ViewPager. pageTransformer {private static final float MAX_ROATE = 360f; public void transformPage (View view, float position) {int width = view. getWidth (); int pageWidth = width; int pageHeight = view. getHeight (); if (position <-1) {// [-Infinity,-1) ViewHelper. setRotation (view, 0); ViewHelper. setAlpha (view, 1);} else if (position <= 1) {// [-] float result = position * MAX_ROATE; // rotate ViewHelper. setmediatx (view, pageWidth * 0.5f); ViewHelper. seteffecty (view, pageHeight * 0.5f); ViewHelper. setRotation (view, result); // transparency ViewHelper. setAlpha (view, 1-Math.abs (position); // scale ViewHelper. setScaleY (view, 1-Math.abs (position); ViewHelper. setScaleX (view, 1-Math.abs (position);} else {// (1, + Infinity] ViewHelper. setRotation (view, 0); ViewHelper. setAlpha (view, 1 );}}

Effect

Thanks

1. JakeWharton: NineOldAndroids

2. Google: Using ViewPager for Screen Slides

Developed

• Zsl <1300326388@qq.com>

Source Code address

ViewPagerWithAnimations
Welcome to Star