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

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

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

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

 1 public class MainActivity extends Activity {
 2 
 3     private ViewPager mViewPager;
 4     private int[] imgRes = new int[] { R.drawable.guide_image1, R.drawable.guide_image2, R.drawable.guide_image3 };
 5     private List<ImageView> imgList = new ArrayList<ImageView>();
 6 
 7     @Override
 8     protected void onCreate(Bundle savedInstanceState) {
 9         super.onCreate(savedInstanceState);
10         requestWindowFeature(Window.FEATURE_NO_TITLE);
11         setContentView(R.layout.activity_main);
12         mViewPager = (ViewPager) findViewById(R.id.viewpager);
13         mViewPager.setAdapter(new PagerAdapter() {
14 
15             @Override
16             public boolean isViewFromObject(View arg0, Object arg1) {
17                 return arg0 == arg1;
18             }
19 
20             @Override
21             public int getCount() {
22                 return imgRes.length;
23             }
24 
25             @Override
26             public Object instantiateItem(ViewGroup container, int position) {
27                 ImageView mImageView = new ImageView(MainActivity.this);
28                 mImageView.setBackgroundResource(imgRes[position]);
29                 mImageView.setScaleType(ScaleType.CENTER_CROP);
30                 imgList.add(mImageView);
31                 container.addView(mImageView);
32                 return mImageView;
33             }
34 
35             @Override
36             public void destroyItem(ViewGroup container, int position, Object object) {
37                 container.removeView(imgList.get(position));
38             }
39         });
40     }
41 }

上面是最简单的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

源码如下：

 1 public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
 2     private static final float MIN_SCALE = 0.85f;
 3     private static final float MIN_ALPHA = 0.5f;
 4 
 5     public void transformPage(View view, float position) {
 6         int pageWidth = view.getWidth();
 7         int pageHeight = view.getHeight();
 8 
 9         if (position < -1) { // [-Infinity,-1)
10             // This page is way off-screen to the left.
11             view.setAlpha(0);
12 
13         } else if (position <= 1) { // [-1,1]
14             // Modify the default slide transition to shrink the page as well
15             float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
16             float vertMargin = pageHeight * (1 - scaleFactor) / 2;
17             float horzMargin = pageWidth * (1 - scaleFactor) / 2;
18             if (position < 0) {
19                 view.setTranslationX(horzMargin - vertMargin / 2);
20             } else {
21                 view.setTranslationX(-horzMargin + vertMargin / 2);
22             }
23 
24             // Scale the page down (between MIN_SCALE and 1)
25             view.setScaleX(scaleFactor);
26             view.setScaleY(scaleFactor);
27 
28             // Fade the page relative to its size.
29             view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
30 
31         } else { // (1,+Infinity]
32             // This page is way off-screen to the right.
33             view.setAlpha(0);
34         }
35     }
36 }

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

 1 public class DepthPageTransformer implements ViewPager.PageTransformer {
 2     private static final float MIN_SCALE = 0.75f;
 3 
 4     public void transformPage(View view, float position) {
 5         int pageWidth = view.getWidth();
 6 
 7         if (position < -1) { // [-Infinity,-1)
 8             // This page is way off-screen to the left.
 9             view.setAlpha(0);
10 
11         } else if (position <= 0) { // [-1,0]
12             // Use the default slide transition when moving to the left page
13             view.setAlpha(1);
14             view.setTranslationX(0);
15             view.setScaleX(1);
16             view.setScaleY(1);
17 
18         } else if (position <= 1) { // (0,1]
19             // Fade the page out.
20             view.setAlpha(1 - position);
21 
22             // Counteract the default slide transition
23             view.setTranslationX(pageWidth * -position);
24 
25             // Scale the page down (between MIN_SCALE and 1)
26             float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
27             view.setScaleX(scaleFactor);
28             view.setScaleY(scaleFactor);
29 
30         } else { // (1,+Infinity]
31             // This page is way off-screen to the right.
32             view.setAlpha(0);
33         }
34     }
35 }

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