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

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.布局文件中遵照自定义控件的写法即可:

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

3.集成该开源库需要注意一些事项:
当ViewPager中的子View超过三个的时候，我们需要对PagerAdapter修改，重写InstantiateItem()方法,如下:
@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  if (mState == State.IDLE && positionOffset > 0) {  oldPage = getCurrentItem();  mState = position == oldPage ? State.GOING_RIGHT : State.GOING_LEFT;}boolean goingRight = position == oldPage;if (mState == State.GOING_RIGHT && !goingRight)  mState = State.GOING_LEFT;  else if (mState == State.GOING_LEFT && goingRight)  mState = State.GOING_RIGHT;  float effectOffset = isSmall(positionOffset) ? 0 : positionOffset;  // mLeft = getChildAt(position);  // mRight = getChildAt(position+1);  mLeft = findViewFromObject(position);  mRight = findViewFromObject(position+1);  if (mFadeEnabled)  animateFade(mLeft, mRight, effectOffset);  if (mOutlineEnabled)  animateOutline(mLeft, mRight);  switch (mEffect) {  case Standard:  break;  case Tablet:  animateTablet(mLeft, mRight, effectOffset);  break;  case CubeIn:  animateCube(mLeft, mRight, effectOffset, true);  break;  case CubeOut:  animateCube(mLeft, mRight, effectOffset, false);  break;  case FlipVertical:  animateFlipVertical(mLeft, mRight, positionOffset, positionOffsetPixels);  break;  case FlipHorizontal:  animateFlipHorizontal(mLeft, mRight, effectOffset, positionOffsetPixels);  case Stack:  animateStack(mLeft, mRight, effectOffset, positionOffsetPixels);  break;  case ZoomIn:  animateZoom(mLeft, mRight, effectOffset, true);  break;  case ZoomOut:  animateZoom(mLeft, mRight, effectOffset, false);  break;  case RotateUp:  animateRotate(mLeft, mRight, effectOffset, true);  break;  case RotateDown:  animateRotate(mLeft, mRight, effectOffset, false);  break;  case Accordion:  animateAccordion(mLeft, mRight, effectOffset);  break;  case Test:     animateTest(mLeft, mRight, effectOffset);  break; }super.onPageScrolled(position, positionOffset, positionOffsetPixels);if (effectOffset == 0) {disableHardwareLayer();mState = State.IDLE;}}

经过这三步，我们就可以添加具有新的补间动画的ViewPager. 这里大家可以尽情发挥自己的创意，不断地扩展该开源库,实现自己想要的效果.
Demo下载地址:http://download.csdn.net/detail/t12x3456/6468601
                               
1楼walker021小时前
楼主把demo放出来呗
Re: t12x34561小时前
回复walker02n好的，已上传:http://download.csdn.net/detail/t12x3456/6468601