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 = ;

    private ViewPager mPager;

    private PagerAdapter mPagerAdapter;

    private static final int[] COLOR = {
            , , , , 
    };

    @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 = f;
    private static final float MIN_ALPHA = f;

    @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 < -) { //表示已經滑出螢幕（左邊）
            view.setAlpha();
        } else if (position <= ) { // [-1,1]
            float scaleFactor = Math.max(MIN_SCALE,  - Math.abs(position));
            float vertMargin = pageHeight * ( - scaleFactor) / ;
            float horzMargin = pageWidth * ( - scaleFactor) / ;
            if (position < ) {
                view.setTranslationX(horzMargin - vertMargin / );
            } else {
                view.setTranslationX(-horzMargin + vertMargin / );
            }

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

            //設定透明度
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                            ( - MIN_SCALE) * ( - MIN_ALPHA));

        } else {
            //表示已經滑出螢幕（右邊）
            view.setAlpha();
        }
    }
}
           

動畫效果二的實作：

DepthPageTransformer.java

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

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

        /**
         * position：這個position不是手指滑動的坐标位置，而是滑動頁面相對于手機螢幕的位置，
         * 範圍位：[-1,1],[-1,0)表示頁面向左滑出螢幕，0表示處于中心（即目前顯示）的頁面，
         * (0,1]表示頁面向右滑出螢幕
         */
        if (position < -) { //表示已經滑出螢幕（左邊）
            view.setAlpha();
        } else if (position <= ) { // [-1,0]
            view.setAlpha();
            view.setTranslationX();
            view.setScaleX();
            view.setScaleY();

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

            view.setTranslationX(pageWidth * -position);

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

        } else { //表示已經滑出螢幕（右邊）
            view.setAlpha();
        }
    }
}
           

應用動畫

調用ViewPager的如下方法應用動畫效果：

//為ViewPager設定變換動畫
setPageTransformer(true, new ZoomOutPageTransformer());
           

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