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

转载 2013年12月04日 21:37:51

如有转载,请声明出处: 时之沙: 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.布局文件中遵照自定义控件的写法即可:

  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中的的枚举类:

  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.     }  

怎么设置呢?非常简单:

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

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


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

TransitionEffect.Tablet

                                  


TransitionEffect.Stack

                                  

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


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

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

EX:

  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代替.

  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.增加动画效果的具体实现:
  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的方法中,增加对应效果的处理:

  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.   

相关文章推荐

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

Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果 某天看到京东商城首页的滑动广告的Banner,在流动切换的时候有立体的动画效果,感觉很有意思,然后研究了下如...
  • t12x3456
  • t12x3456
  • 2013年10月29日 09:07
  • 33423

Android 深入ViewPager实现类京东商城首页广告效果

如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456 某天看到京东商城首页的滑动广告的Banner,在流动切换的时候有立体的动画效果,感觉...

android高分段进阶攻略(9)——ViewPager补间动画实现京东广告Banner

最近工作较忙,勿发私信,最近看了一篇不错的博客(http://blog.csdn.net/t12x3456/article/details/13290349),使用第三方插件实现京东广告Banner,...

京东首页之nav导航栏、banner广告部分、footer备案号

项目回顾:上一篇博文主要讲了如何实现京东首页的页面顶部和Logo&搜索框部分; 里面主要知识:利用列表作划分鲜明的文字部分,相对定位和绝对定位去实现弹框效果。今天我们这篇博文主要是简单介绍京东首页的...

Android 中ViewPager 实现动画效果切换

概述ViewPager是Android开发中使用场景非常频繁的控件,单一的动画效果切换已经越来越不能满足追求个性化的应用中。而ViewPager自身也带有一个接口来处理页面间的动画切换,那就是setP...

Android开发知识(二):ViewPager切换动画效果的实现

本文主要讲解如何实现ViewPager自定义的页面切换动画效果。通过实现PageTransformer接口,然后利用position在这个过程的变化来动态设置页面的尺寸比例、透明度、以及偏移量。...
  • lc_miao
  • lc_miao
  • 2017年07月14日 09:49
  • 8718

Android自定义View: 如何实现类钟摆的动画效果?

By Long Luo继第一篇Android自定义View:如何实现一个模拟时钟?,我们使用Android自定义View实现了一款模拟表盘,第二篇Android自定义View:另一种实现手表指针转动的...

Android UI - 实现广告Banner轮播效果

转载自http://blog.csdn.net/wwj_748/article/details/44243053 Android UI - 实现广告Banner轮播效果 前言 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果
举报原因:
原因补充:

(最多只允许输入30个字)