ViewPager滑动动画效果实现

ViewPager滑动动画效果

效果①：

效果②：

实现

新建布局文件:fragment_screen_slide_page.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text"
        style="?android:textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:lineSpacingMultiplier="1.2"
        android:padding="16dp"
        android:text="1"
        android:textColor="@android:color/white"
        android:textSize="40dp"
        android:textStyle="bold" />

</LinearLayout>

activity_screen_slide.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" />

创建ScreenSlideActivity.java

public class ScreenSlideActivity extends FragmentActivity {

    private static final int NUM_PAGES = 5;

    private ViewPager mPager;

    private PagerAdapter mPagerAdapter;

    private static final int[] COLOR = {
            0xff00cc00, 0xff1144aa, 0xffd2006b, 0xffff5600, 0xff9303a9
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_screen_slide);

        mPager = (ViewPager) findViewById(R.id.pager);
        mPager.setPageTransformer(true, new ZoomOutPageTransformer());//为ViewPager设置变换动画
        mPagerAdapter = new ScreenSlidePagerAdapter(getFragmentManager());
        mPager.setAdapter(mPagerAdapter);
    }


    private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
        public ScreenSlidePagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return ScreenSlidePageFragment.create(position, COLOR[position % COLOR.length]);
        }

        @Override
        public int getCount() {
            return NUM_PAGES;
        }
    }
}

ScreenSlidePageFragment.java

public class ScreenSlidePageFragment extends Fragment {
    public static final String PAGE = "page";
    public static final String COLOR = "color";

    private int mPageNumber;
    private int mColor;

    public static ScreenSlidePageFragment create(int pageNumber, int color) {
        ScreenSlidePageFragment fragment = new ScreenSlidePageFragment();
        Bundle args = new Bundle();
        args.putInt(PAGE, pageNumber);
        args.putInt(COLOR, color);
        fragment.setArguments(args);
        return fragment;
    }

    public ScreenSlidePageFragment() {
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPageNumber = getArguments().getInt(PAGE);
        mColor = getArguments().getInt(COLOR);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater
                .inflate(R.layout.fragment_screen_slide_page, container, false);
        rootView.setBackgroundColor(mColor);
        ((TextView) rootView.findViewById(R.id.text)).setText("" + mPageNumber);
        return rootView;
    }
}

动画效果一的实现：

ZoomOutPageTransformer.java

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();

        /**
         * position：这个position不是手指滑动的坐标位置，而是滑动页面相对于手机屏幕的位置，
         * 范围位：[-1,1],[-1,0)表示页面向左滑出屏幕，0表示处于中心（即当前显示）的页面，
         * (0,1]表示页面向右滑出屏幕
         */
        if (position < -1) { //表示已经滑出屏幕（左边）
            view.setAlpha(0);
        } else if (position <= 1) { // [-1,1]
            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);
            }

            //缩放
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            //设置透明度
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                            (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else {
            //表示已经滑出屏幕（右边）
            view.setAlpha(0);
        }
    }
}

动画效果二的实现：

DepthPageTransformer.java

public class DepthPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.75f;

    @Override
    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();

        /**
         * position：这个position不是手指滑动的坐标位置，而是滑动页面相对于手机屏幕的位置，
         * 范围位：[-1,1],[-1,0)表示页面向左滑出屏幕，0表示处于中心（即当前显示）的页面，
         * (0,1]表示页面向右滑出屏幕
         */
        if (position < -1) { //表示已经滑出屏幕（左边）
            view.setAlpha(0);
        } else if (position <= 0) { // [-1,0]
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);

        } else if (position <= 1) { // (0,1]
            view.setAlpha(1 - position);

            view.setTranslationX(pageWidth * -position);

            float scaleFactor = MIN_SCALE
                    + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { //表示已经滑出屏幕（右边）
            view.setAlpha(0);
        }
    }
}

应用动画

调用ViewPager的如下方法应用动画效果：

//为ViewPager设置变换动画
setPageTransformer(true, new ZoomOutPageTransformer());

源码：https://github.com/heqinghqocsh/Android_Animation