ViewPager滑动动画效果实现

刺骨的言语ヽ痛彻心扉 2022-06-11 05:44 270阅读 0赞

# ViewPager滑动动画效果 #

**效果①：**  
![这里写图片描述][SouthEast]  
**效果②：**  
![这里写图片描述][SouthEast 1]

### **实现** ###

新建布局文件:**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][https_github.com_heqinghqocsh_Android_Animation]

[SouthEast]: /images/20220611/1105590ec3c3462ca7ebaacc3c7f7a0f.png
[SouthEast 1]: /images/20220611/c07e0d833b6a4797a7ef4f99917ac072.png
[https_github.com_heqinghqocsh_Android_Animation]: https://github.com/heqinghqocsh/Android_Animation