Android开发之ViewPager切换动画

Android从3.0开始，ViewPager也开始有了切换动画，ViewPager有个setPageTransformer()方法，用于设置ViewPager切换时的动画效果。Google提供了两个切换动画的例子：DepthPageTransformer和ZoomOutPageTransformer。其实完全可以通过实现 ViewPager.PageTransformer接口，然后重写transformPage(View view, float position)方法来做出属于自己的切换动画效果。但是最难的就是该方法中两个参数的理解，其中view就是ViewPager中滑动的View，但是position比较难理解，接下来在测试中来一探究竟。

Activity布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"></android.support.v4.view.ViewPager></RelativeLayout>

Activity.java

public class MainActivity extends Activity {    private ViewPager mViewPager;    private int[] images = {R.drawable.one, R.drawable.two, R.drawable.three};    private ArrayList<ImageView> imageViews = new ArrayList<>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        init();    }    /**     * 初始化数据     */    private void init() {        // 定义一个布局并设置参数        LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(                LinearLayout.LayoutParams.MATCH_PARENT,                LinearLayout.LayoutParams.MATCH_PARENT);        // 初始化引导图片列表        for (int i = 0; i < images.length; i++) {            ImageView iv = new ImageView(this);            iv.setLayoutParams(mParams);            // 防止图片不能填满屏幕            iv.setScaleType(ImageView.ScaleType.FIT_XY);            // 加载图片资源            iv.setImageResource(images[i]);            imageViews.add(iv);        }        mViewPager = (ViewPager) findViewById(R.id.viewPager);        mViewPager.setAdapter(new MyViewPagerAdapter());        // 设置切换动画        mViewPager.setPageTransformer(true, new MyPageTransformer());    }    class MyViewPagerAdapter extends PagerAdapter {        // viewpager中的要显示的View的总数量        @Override        public int getCount() {            return imageViews.size();        }        // 滑动切换的时候销毁当前的View        @Override        public void destroyItem(ViewGroup container, int position,                                Object object) {            container.removeView(imageViews.get(position));        }        // 每次滑动的时候生成的View        @Override        public Object instantiateItem(ViewGroup container, int position) {            container.addView(imageViews.get(position));            return imageViews.get(position);        }        @Override        public boolean isViewFromObject(View arg0, Object arg1) {            return arg0 == arg1;        }    }}

MyPageTransformer，自定义切换动画

public class MyPageTransformer implements ViewPager.PageTransformer {    /**     *     * @param view 滑动中的那个view     * @param position     */    public void transformPage(View view, float position) {        if (position < -1) { // [-Infinity,-1)            Log.e("TAG [-Infinity,-1)  ", view + " , " + position + "");        } else if (position <= 1) // a页滑动至b页 ； a页从 0.0 ~ -1 ；b页从1 ~ 0.0        {            Log.e("TAG [-1, 1]", view + " , " + position + "");        } else { // (1,+Infinity]            Log.e("TAG (1,+Infinity] ", view + " , " + position + "");        }    }}

打印分析

三个界面分别为A、B和C，滑动顺序为A->B->C，然后返回，通过打印测试，position的变化如下:

A —> B
A界面的position变化区间[0, -1]
B界面的position变化区间[1, 0 ]
C界面无变化

---

B —> C
A界面的position变化区间[-1, -2]
B界面的position变化区间[0, -1]
C界面的position变化区间[1, 0 ]

---

C —> B
A界面的position 无变化
B界面的position变化区间[-1, 0]
C界面的position变化区间[0, 1 ]

---

B —> A
A界面的position 变化区间[-1,0]
B界面的position 变化区间[0, 1]
C界面的position变化就是[1, 2 ]

实现一个自己的切换动画（参考网上代码）

public class MyPageTransformer implements ViewPager.PageTransformer {    private static final float ROT_MAX = 20.0f;    private float mRot;    /**     * @param view     滑动中的那个view     * @param position     */    public void transformPage(View view, float position) {        //界面不可见        if (position < -1) {            ViewCompat.setRotation(view, 0);        }        //界面可见        else if (position <= 1) {            mRot = (ROT_MAX * position);            ViewCompat.setPivotX(view, view.getMeasuredWidth() * 0.5f);            ViewCompat.setPivotY(view, view.getMeasuredHeight());            ViewCompat.setRotation(view, mRot);        }        //界面不可见        else {            ViewCompat.setRotation(view, 0);        }    }}

测试效果

PageTransformer.gif

文／YungFan（简书作者）
原文链接：http://www.jianshu.com/p/33b1734f0736
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。