ViewPager+属性动画 实现炫酷视差动画效果

ViewPager有一个setPageTransform()方法可以实现很多酷炫的动画效果

先来个仿QQ的侧滑面板效果

		vp.setPageTransformer(true, new PageTransformer() {
			/**
			 * 页面滑动时回调的方法,
			 * @param page当前滑动的view
			 * @param position 当从右向左滑的时候,左边page的position是[0一-1]变化的
			 * 右边page的position是[1一0]变化的,再次滑动的时候,刚才变化到-1(即已经画出视野的page)將从-1变化到-2,
			 * 而当前可见的page和右边滑过来的page的position将再次从[0一-1]变化 和 [1一0]变化   但是我们关心是position是[-1一1]变化的
			 * page,所以处理动画的时候需要我们过滤一下
			 */
			@Override
			public void transformPage(View page, float position) {
				rollingPage(page,position);//调用翻页效果
			}
		});

是不是很酷炫啊,实现起来代码还是很简单的

用到的技术就是ViewPager+属性动画,对于属性动画是android3.0出现的,如果要兼容低版本,可以使用nineoldandroid.jar  下载地址

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		ViewPager vp=(ViewPager) findViewById(R.id.vp);
		//给viewpager设置一个PagerTransformer
		vp.setPageTransformer(true, new PageTransformer() {
			/**
			 * 页面滑动时回调的方法,
			 * @param page当前滑动的view
			 * @param position 当从右向左滑的时候,左边page的position是[0一-1]变化的
			 * 右边page的position是[1一0]变化的,再次滑动的时候,刚才变化到-1(即已经画出视野的page)將从-1变化到-2,
			 * 而当前可见的page和右边滑过来的page的position将再次从[0一-1]变化 和 [1一0]变化   但是我们关心是position是[-1一1]变化的
			 * page,所以处理动画的时候需要我们过滤一下
			 */
			@Override
			public void transformPage(View page, float position) {
				rollingPage(page,position);
			}
		});
		vp.setAdapter(new MyAdapter(getSupportFragmentManager()));
	}

对于vp.setPageTransformer(true, new PageTransformer())

 页面滑动时回调的方法,
@param page当前滑动的view
@param position 当从右向左滑的时候,左边page的position是[0一-1]变化的
右边page的position是[1一0]变化的,再次滑动的时候,刚才变化到-1(即已经画出视野的page)將从-1变化到-2,
而当前可见的page和右边滑过来的page的position将再次从[0一-1]变化 和 [1一0]变化 但是我们关心是position是[-1一1]变化的
page,所以处理动画的时候需要我们过滤一下

那么现在我们就来实现几个比较好玩的动画效果

1.动画效果1 凹陷的3D效果

.

	/**
	 * 动画效果1  凹陷的3D效果
	 */
	public void sink3D(View view,float position){
		if(position>=-1&&position<=1){
			view.setPivotX(position<0?view.getWidth():0);
			view.setRotationY(-90*position);
		  }
	}

2.动画效果2 凸起的3D效果

	/**
	 * 动画效果2  凸起的3D效果
	 */
	public void raised3D(View view,float position){
		if(position>=-1&&position<=1){
			view.setPivotX(position<0?view.getWidth():0);//设置要旋转的Y轴的位置
			view.setRotationY(90*position);//开始设置属性动画值
		  }
	}

3.动画效果3 视差的效果

	/**
	 * 动画效果3  视差的效果
	 * 这个地方要注意此处的view不是单纯的手指滑动的那个RelativeLayout
	 * 因为对于FragmentpagerAdapter,使用时默认会在fragment布局的最外层套上一层
	 * FrameLayout,所以你要是使用view.getChildAt()得到的是一个外层的FrameLayout
	 * 而不是我们要进行视差动画的ImageView,所以就是用findViewById()来拿到跟布局RelativeLayout
	 * 然后再调用getChildAt()方法来得到所有的ImageView
	 */
	public void seightDis(View view,float position){
		if(position>=-1&&position<=1){
			ViewGroup vg = (ViewGroup) view.findViewById(R.id.rl);
			for(int i=0;i<vg.getChildCount();i++){
				View child=vg.getChildAt(i);
				child.setTranslationX(Math.abs(position)*child.getWidth()*2);
			}
		  }
	}

4.动画效果4 仿QQ的缩放动画效果

	/**
	 * 动画效果4  仿QQ的缩放动画效果
	 */
	public void imitateQQ(View view,float position){
		if(position>=-1&&position<=1){
			view.setPivotX(position>0?0:view.getWidth()/2);
			//view.setPivotY(view.getHeight()/2);
			view.setScaleX((float)((1-Math.abs(position)<0.5)?0.5:(1-Math.abs(position))));
			view.setScaleY((float)((1-Math.abs(position)<0.5)?0.5:(1-Math.abs(position))));
		  }
	}

5.动画效果5 仿掌阅的翻书动画效果

	/**
	 * 动画效果5  仿掌阅的翻书动画效果
	 * 分析翻书的效果,可以分解为两部分:1.左边的view绕着左边的轴旋转,同时x方向上有缩放的效果
	 * 要注意的是因为是viewpager左边的view在滑动的时候是要向左边移动的,但我们要的翻书效果在翻页完成前
	 * 是一直在读者视角内的,所以左边的view在滑动的时候要进行向右的平移
	 * 2.右边的view从可见的时候开始就一直在左view的下方,但是作为viewpager他是从右边慢慢滑到当前的位置的
	 * 所以要达到这个效果就需要进行一个x方向的平移动画
	 */
	public void rollingPage(View view,float position){
		if(position>=-1&&position<=1){
			view.setPivotX(0);
			if(position<0){
				view.setTranslationX(-position*view.getWidth());
				view.setRotationY(90*position);
				view.setScaleX(1-Math.abs(position));
			}
			else{
				view.setTranslationX(-position*view.getWidth());
			}
			
		  }
	}

想要源码的可以点击下载 : 源码下载