Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果

如有转载，请声明出处: 时之沙: http://blog.csdn.net/t12x3456

某天看到京东商城首页的滑动广告的Banner，在流动切换的时候有立体的动画效果,感觉很有意思,然后研究了下如何实现. 

废话不多说，接下来我会讲述如何实现这种效果，以及如何根据需求自定义出新的动画效果进行扩展实现.

首先还是看一下京东商城上的效果:

像一般做这种效果怎么办呢？我的建议还是先在github或者google code上搜索开源库. 一来开源库一般做得比较成熟，API封装得较好，耦合性比较低. 二来项目比较利于维护.

(并不是说全自己实现的就不好,毕竟每个人实现的思路并不一样，相对于开源库来说，阅读别人的历史代码就相对比较麻烦，有bug或者有新需求的话，会很影响开发的效率)

下面还是直接上项目, 如上所示的效果已经有开源库的实现，而且还有很多其他动画补间效果:

JazzViewPager简介:

github地址: https://github.com/jfeinstein10/JazzyViewPager

该项目是基于ViewPager的一个重写,让我们看一下自带的Demo项目结构:

 这里我们可以看到，ViewPager的动画效果由nineoldandroids这个开源项目实现:

github地址:

  https://github.com/JakeWharton/NineOldAndroids

该动画库将Android3.0以上版本API实现的动画做了重写，可以兼容到3.0以下的版本

JazzyViewPager的集成:

接下来我们看一下如何将该开源库集成到自己的项目中:

1.布局文件中遵照自定义控件的写法即可:

[java] view plaincopy

1. <com.jfeinstein.jazzyviewpager.JazzyViewPager  
2.     xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
4.     android:id="@+id/jazzy_pager"  
5.     android:layout_width="match_parent"  
6.     android:layout_height="match_parent" />  

2.设置ViewPager的动画效果:

这里首先介绍一下目前已经封装好的效果:

JazzyViewPager中的的枚举类:

[java] view plaincopy

1. public enum TransitionEffect {  
2.         Standard,  
3.         Tablet,  
4.         CubeIn,  
5.         CubeOut,  
6.         FlipVertical,  
7.         FlipHorizontal,  
8.         Stack,  
9.         ZoomIn,  
10.         ZoomOut,  
11.         RotateUp,  
12.         RotateDown,  
13.         Accordion  
14.     }  

怎么设置呢?非常简单:

[java] view plaincopy

1. private JazzyViewPager mJazzy;  
2. /* ... */  
3. mJazzy.setTransitionEffect(TransitionEffect.*);  

在京东商城使用的效果即为TransitionEffect.CubeOut

这里我们还可以看一下其他的效果

TransitionEffect.Tablet

TransitionEffect.Stack

其他效果大家可以自己尝试下.

3.集成该开源库需要注意一些事项:

当ViewPager中的子View超过三个的时候，我们需要对PagerAdapter修改，重写InstantiateItem()方法,,会导致补间动画不能正常显示.

EX:

[java] view plaincopy

1. private JazzyViewPager mJazzy;  
2. /* ... */  
3. @Override  
4. public Object instantiateItem(ViewGroup container, final int position) {  
5.     Object obj = super.instantiateItem(container, position);  
6.     mJazzy.setObjectForPosition(obj, position);  
7.     return obj;  
8. }  

JazzyViewPager的修改:

如果大家还是嫌目前已经封装的效果还是不满意怎么办？项目有其他动画实现的需求怎么办?这里顺便讲下如何扩展该开源库:(红色部分为需要添加修改的代码)

1.在枚举类中添加所需的动画效果,这里以Test代替.

[java] view plaincopy

1. public enum TransitionEffect {  
2.         Standard,  
3.         Tablet,  
4.         CubeIn,  
5.         CubeOut,  
6.         FlipVertical,  
7.         FlipHorizontal,  
8.         Stack,  
9.         ZoomIn,  
10.         ZoomOut,  
11.         RotateUp,  
12.         RotateDown,  
13.         Accordion,  
14.         <span style="color:#FF0000;">Test</span>  
15.  }  

2.增加动画效果的具体实现:

[java] view plaincopy

1. protected void animateTest(View left, View right, float positionOffset) {     
2.  if (mState != State.IDLE) {  
3.   if (left != null) {  
4.    //此处增加具体动画  
5.  }  
6.   if (right != null) {  
7.    //此处增加具体动画实现   
8.  }  
9.  }  
10. }  

3.在onPageScrolled的方法中，增加对应效果的处理:

[java] view plaincopy

1. @Override  
2. public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
3.   if (mState == State.IDLE && positionOffset > 0) {  
4.   oldPage = getCurrentItem();  
5.   mState = position == oldPage ? State.GOING_RIGHT : State.GOING_LEFT;  
6. }  
7. boolean goingRight = position == oldPage;     
8. if (mState == State.GOING_RIGHT && !goingRight)  
9.   mState = State.GOING_LEFT;  
10.   else if (mState == State.GOING_LEFT && goingRight)  
11.   mState = State.GOING_RIGHT;  
12.   
13.   float effectOffset = isSmall(positionOffset) ? 0 : positionOffset;  
14.   
15.   // mLeft = getChildAt(position);  
16.   // mRight = getChildAt(position+1);  
17.   mLeft = findViewFromObject(position);  
18.   mRight = findViewFromObject(position+1);  
19.   
20.   if (mFadeEnabled)  
21.   animateFade(mLeft, mRight, effectOffset);  
22.   if (mOutlineEnabled)  
23.   animateOutline(mLeft, mRight);  
24.   
25.   switch (mEffect) {  
26.   case Standard:  
27.   break;  
28.   case Tablet:  
29.   animateTablet(mLeft, mRight, effectOffset);  
30.   break;  
31.   case CubeIn:  
32.   animateCube(mLeft, mRight, effectOffset, true);  
33.   break;  
34.   case CubeOut:  
35.   animateCube(mLeft, mRight, effectOffset, false);  
36.   break;  
37.   case FlipVertical:  
38.   animateFlipVertical(mLeft, mRight, positionOffset, positionOffsetPixels);  
39.   break;  
40.   case FlipHorizontal:  
41.   animateFlipHorizontal(mLeft, mRight, effectOffset, positionOffsetPixels);  
42.   case Stack:  
43.   animateStack(mLeft, mRight, effectOffset, positionOffsetPixels);  
44.   break;  
45.   case ZoomIn:  
46.   animateZoom(mLeft, mRight, effectOffset, true);  
47.   break;  
48.   case ZoomOut:  
49.   animateZoom(mLeft, mRight, effectOffset, false);  
50.   break;  
51.   case RotateUp:  
52.   animateRotate(mLeft, mRight, effectOffset, true);  
53.   break;  
54.   case RotateDown:  
55.   animateRotate(mLeft, mRight, effectOffset, false);  
56.   break;  
57.   case Accordion:  
58.   animateAccordion(mLeft, mRight, effectOffset);  
59.   break;  
60.   <span style="color:#FF0000;">case</span> <span style="color:#FF0000;">Test:   </span><span class="nf">  
61. <span style="color:#FF0000;">  animateTest</span></span><span style="color:#FF0000;"><span class="o"></span>(mLeft, mRight, effectOffset);  
62.   break;  
63. </span> }  
64.   
65. super.onPageScrolled(position, positionOffset, positionOffsetPixels);  
66.   
67. if (effectOffset == 0) {  
68. disableHardwareLayer();  
69. mState = State.IDLE;  
70. }  
71.   
72. }  

经过这三步，我们就可以添加具有新的补间动画的ViewPager. 这里大家可以尽情发挥自己的创意，不断地扩展该开源库,实现自己想要的效果.

Demo下载地址:http://download.csdn.net/detail/t12x3456/6468601