ViewPager花式切换效果

一、关于ViewPager

Viewpager作为一个经常使用的控件，相信大家都使用过。今天我们要给这个控件加上各样的切换效果。

二、效果一

无图无真相，先上图

这是viewpager的一个3D动画效果，其实实现它没有多么复杂，只需要运用v4包中PageTransformer类即可实现，这个类提供了一个方法transformpage，这个方法给我们了俩参数，一个是viewpager当前页面的视图，一个是该视图运动的百分比，通过这俩参数我们可以可以自定义容器中的view移动，比如说上图效果。

@Override
	public void transformPage(View view, float position) {
		if(position<1&&position>-1){
			//效果1
			view.setScaleX(1-Math.abs(position));
			view.setScaleY(1-Math.abs(position));


		}
	}

对的就是这么简单，再来一个效果

三、效果二

这个效果是移动时缩放了一定的大小，代码如下：

view.setScaleX(Math.max(0.9f,1-Math.abs(position)));
view.setScaleY(Math.max(0.9f,1-Math.abs(position)));

四、来个更炫的效果，3D翻转

这个效果看着很炫丽，其实看到这种效果我们第一时间想的应该是变复杂为简单，将复杂的动画拆分，上述动画可以拆分为俩动画：

1、页面缩小动画

2、页面转动动画

好了上代码：

view.setPivotX(position<0f?view.getWidth():0f);//左边页面：0~-1；右边的页面：1~0
view.setPivotY(view.getHeight()*0.5f);
view.setRotationY(position*45f);//0~90度

五、组件抖动效果

每个小组件都附加了一个位移动画，给每个子控件加一个随机的位移效果，代码如下：

	@Override
	public void transformPage(View view, float position) {
		if(position<1&&position>-1) {
			//找到里面的子控件
			ViewGroup v = (ViewGroup) view.findViewById(R.id.rl);
			int childCount = v.getChildCount();
			for (int i = 0; i < childCount; i++) {
				View childView = v.getChildAt(i);
				float factor = (float) Math.random() * 3;
				if (childView.getTag() == null) {
					childView.setTag(factor);
				} else {
					factor = (float) childView.getTag();
				}
				/**每一个子控件达到不同的视差效果，translationX是不一样的
				 * position : 0 ~ -1
				 * translationX: 0 ~ childView.getWidth();
				 */
				childView.setTranslationX(factor * childView.getWidth() * position);
			}

		}
	}

六、3D内翻转效果

不解释了，直接上代码相信大家懂得，跟上面3D翻转效果原理类似：

view.setPivotX(position<0f?view.getWidth():0f);//左边页面：0~-1；右边的页面：1~0
view.setPivotY(view.getHeight()*0.5f);
view.setRotationY(-position*45f);//0~90度

view.setPivotX(view.getWidth()*0.5f);//左边页面：0~-1；右边的页面：1~0
view.setPivotY(view.getHeight()*0.5f);
view.setRotationY(-position*45f);//0~90度

七、源码

根据相同的原理我们可以实现更多的效果，这几个效果代码已上传到github下边是链接：

源码