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