Android为ViewPager增加切换动画——使用属性动画.

 ViewPager作为Android最常用的的组件之一，相信大家在项目中会频繁的使用到的，例如利用ViewPager制作引导页、轮播图，甚至做整个app的表现层的框架等等。

Android3.0以下不支持切换动画

但是在Android 3.0（API 11）以下的ViewPager是比较死板的，不支持动画特效的，这也就让ViewPager在切换的时候达不到很好的用户体验，下面就是Android3.0以下不添加动画的ViewPager的实现代码以及效果演示：

public class MainActivity extends Activity {

    private ViewPager mViewPager;
    private int[] imgRes = new int[] { R.drawable.guide_image1, R.drawable.guide_image2, R.drawable.guide_image3 };
    private List<ImageView> imgList = new ArrayList<ImageView>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mViewPager.setAdapter(new PagerAdapter() {

            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                return arg0 == arg1;
            }

            @Override
            public int getCount() {
                return imgRes.length;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ImageView mImageView = new ImageView(MainActivity.this);
                mImageView.setBackgroundResource(imgRes[position]);
                mImageView.setScaleType(ScaleType.CENTER_CROP);
                imgList.add(mImageView);
                container.addView(mImageView);
                return mImageView;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(imgList.get(position));
            }
        });
    }
}

上面是最简单的ViewPager使用的Demo，运行如下，看起来很普通很死板：

支持Android3.0以上的官方方法

值得庆幸的是，Google在Android3.0以上的版本中增加了给ViewPager设置切换动画的API，允许开发者在Android3.0以上版本的应用中为ViewPager增加动画切换效果，这样就可以让ViewPager的切换效果变的绚丽点了，为ViewPager添加动画效果的API如下：

 public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer){...}

其中第一个参数boolean类型设置true就好，第二个参数PageTransformer就是我们自定义好的动画效果：

mViewPager = (ViewPager) findViewById(R.id.viewpager);
mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());

其中ZoomOutPageTransformer的代码来自于google的training文档中，英文好的朋友可以直接进入文档查看，链接是

http://developer.android.com/training/animation/screen-slide.html

源码如下：

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

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

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            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);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

另外Google文档中还提供了另外一个动画的实现方式，我暂且把源码附在下面：

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

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

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0);

        } else if (position <= 0) { // [-1,0]
            // Use the default slide transition when moving to the left page
            view.setAlpha(1);
            view.setTranslationX(0);
            view.setScaleX(1);
            view.setScaleY(1);

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

            // Counteract the default slide transition
            view.setTranslationX(pageWidth * -position);

            // Scale the page down (between MIN_SCALE and 1)
            float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0);
        }
    }
}

两种方式的所实现的效果如下所示，一是ZoomOutPageTransformer，二是DepthPageTransformer