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