ViewPager设置切换动画

在原生的ViewPager切换时会显的很突然很生硬，百度了许多前辈的案例，思路都差不多，那就是先写一个继承Scroller的类SpeedScroller

package com.youhe.yoyo.addforlu;

import android.content.Context;
import android.view.animation.Interpolator;
import android.widget.Scroller;

/**
 * Created by abc on 2016/12/1.
 */

public class SpeedScroller extends Scroller {
    private int mDuration = 1000;

    public SpeedScroller(Context context) {
        super(context);
    }

    public SpeedScroller(Context context, Interpolator interpolator) {
        super(context, interpolator);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy, int duration) {
        // Ignore received duration, use fixed one instead
        super.startScroll(startX, startY, dx, dy, mDuration);
    }

    @Override
    public void startScroll(int startX, int startY, int dx, int dy) {
        // Ignore received duration, use fixed one instead
        super.startScroll(startX, startY, dx, dy, mDuration);
    }

    public void setmDuration(int time) {
        mDuration = time;
    }

    public int getmDuration() {
        return mDuration;
    }

}

这个类写好之后就可以直接引用了，在需要用到的Activity里：

mypager = (ViewPager) parentView.findViewById(R.id.News_pager);
        mypager.setPageTransformer(true, new ZoomOutPageTransformer());
        pagerAdapter = new MyFragmentPagerAdapter(getChildFragmentManager(), imageList,context);
        mypager.setAdapter(pagerAdapter);

        SpeedScroller mScroller;
        try {
            Field mField = ViewPager.class.getDeclaredField("mScroller");
            mField.setAccessible(true);
            mScroller = new SpeedScroller(mypager.getContext(),new LinearInterpolator());
            mField.set(mypager, mScroller);
            mScroller.setmDuration(500);//ms
        } catch (Exception e) {
            e.printStackTrace();
        }

首先绑定组件，然后设置动画（下面将给出7种不同的动画风格）

mypager.setPageTransformer(true, new ZoomOutPageTransformer());

注意这句：

mScroller = new SpeedScroller(mypager.getContext(),new LinearInterpolator());

SpeedScroller方法里的第二个参数是插值器，我们也有很多种

AccelerateDecelerateInterpolator   在动画开始与介绍的地方速率改变比较慢，在中间的时候加速
AccelerateInterpolator                     在动画开始的地方速率改变比较慢，然后开始加速
AnticipateInterpolator                      开始的时候向后然后向前甩
AnticipateOvershootInterpolator     开始的时候向后然后向前甩一定值后返回最后的值
BounceInterpolator                          动画结束的时候弹起
CycleInterpolator                             动画循环播放特定的次数，速率改变沿着正弦曲线
DecelerateInterpolator                    在动画开始的地方快然后慢
LinearInterpolator                            以常量速率改变
OvershootInterpolator                      向前甩一定值后再回到原来位置

注意哦，我不是Activity而是Fragment，所以我的adapter是FragmentPagerAdapter，如果你是Activity那就用PagerAdapter就行了

（这不是我们的重点哦）

mScroller.setmDuration(500);最后再这个方法里设置切换的时机长就行了，单位是毫秒(viewpager被广泛应用于广告轮播图，此处正好需要它)

接下来给大家码7种不同的动画风格：（在你的项目里新建以下类就行了）

1、深入浅出DepthPageTransformer

import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;

public class DepthPageTransformer implements PageTransformer {
	private static float MIN_SCALE = 0.5f;

	/**
	 * position参数指明给定页面相对于屏幕中心的位置。它是一个动态属性，会随着页面的滚动而改变。当一个页面填充整个屏幕是，它的值是0，
	 * 当一个页面刚刚离开屏幕的右边时
	 * ，它的值是1。当两个也页面分别滚动到一半时，其中一个页面的位置是-0.5，另一个页面的位置是0.5。基于屏幕上页面的位置
	 * ，通过使用诸如setAlpha()、setTranslationX()、或setScaleY()方法来设置页面的属性，来创建自定义的滑动动画。
	 */
	@Override
	public void transformPage(View view, float position) {
		int pageWidth = view.getWidth();
		if (position < -1) { // [-Infinity,-1)
								// This page is way off-screen to the left.
			view.setAlpha(0);
			view.setTranslationX(0);
		} else if (position <= 0) { // [-1,0]
									// Use the default slide transition when
									// moving to the left page
			view.setAlpha(1);
			view.setTranslationX(0);
			view.setScaleX(1);
			view.setScaleY(1);
		} else if (position <= 1) { // (0,1]
									// Fade the page out.
			view.setAlpha(1 - position);
			// Counteract the default slide transition
			view.setTranslationX(pageWidth * -position);
			// Scale the page down (between MIN_SCALE and 1)
			float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)
					* (1 - Math.abs(position));
			view.setScaleX(scaleFactor);
			view.setScaleY(scaleFactor);
		} else { // (1,+Infinity]
					// This page is way off-screen to the right.
			view.setAlpha(0);
			view.setScaleX(1);
			view.setScaleY(1);
		}
	}

}

2、立方体CubeTransformer

import com.nineoldandroids.view.ViewHelper;

import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;

public class CubeTransformer implements PageTransformer {
	
	/**
	 * position参数指明给定页面相对于屏幕中心的位置。它是一个动态属性，会随着页面的滚动而改变。当一个页面填充整个屏幕是，它的值是0，
	 * 当一个页面刚刚离开屏幕的右边时，它的值是1。当两个也页面分别滚动到一半时，其中一个页面的位置是-0.5，另一个页面的位置是0.5。基于屏幕上页面的位置
	 * ，通过使用诸如setAlpha()、setTranslationX()、或setScaleY()方法来设置页面的属性，来创建自定义的滑动动画。
	 */
	@Override
	public void transformPage(View view, float position) {
		if (position <= 0) {
			//从右向左滑动为当前View
			
			//设置旋转中心点；
			ViewHelper.setPivotX(view, view.getMeasuredWidth());
			ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);
			
			//只在Y轴做旋转操作
			ViewHelper.setRotationY(view, 90f * position);
		} else if (position <= 1) {
			//从左向右滑动为当前View
			ViewHelper.setPivotX(view, 0);
			ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);
			ViewHelper.setRotationY(view, 90f * position);
		}
	}
}

3、旋转RotateTransformer

import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;

import com.nineoldandroids.view.ViewHelper;

public class RotateTransformer implements PageTransformer {

	/**
	 * page当然值得就是滑动中德那个view，position这里是float，不是平时理解的int位置信息，而是当前滑动状态的一个表示，
	 * 比如当滑动到正全屏时
	 * ，position是0，而向左滑动，使得右边刚好有一部被进入屏幕时，position是1，如果前一夜和下一页基本各在屏幕占一半时
	 * ，前一页的position是-0.5，后一页的posiotn是0.5，所以根据position的值我们就可以自行设置需要的alpha，x/y信息。
	 */
	@Override
	public void transformPage(View view, float position) {
		if (position < -1) {
		} else if (position <= 0) {
			ViewHelper.setScaleX(view, 1 + position);
			ViewHelper.setScaleY(view, 1 + position);
			ViewHelper.setRotation(view, 360 * position);
		} else if (position <= 1) {
			ViewHelper.setScaleX(view, 1 - position);
			ViewHelper.setScaleY(view, 1 - position);
			ViewHelper.setRotation(view, 360 * position);
		} else {
		}
	}

}

4、左右折叠AccordionTransformer

import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;

import com.nineoldandroids.view.ViewHelper;

public class AccordionTransformer implements PageTransformer {

	@Override
	public void transformPage(View view, float position) {
		if (position < -1) {
			ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
			ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);
			ViewHelper.setScaleX(view, 1);
		} else if (position <= 0) {
			ViewHelper.setPivotX(view, view.getMeasuredWidth());
			ViewHelper.setPivotY(view, 0);
			ViewHelper.setScaleX(view, 1 + position);
		} else if (position <= 1) {
			ViewHelper.setPivotX(view, 0);
			ViewHelper.setPivotY(view, 0);
			ViewHelper.setScaleX(view, 1 - position);
		} else {
			ViewHelper.setPivotX(view, view.getMeasuredWidth() * 0.5f);
			ViewHelper.setPivotY(view, view.getMeasuredHeight() * 0.5f);
			ViewHelper.setScaleX(view, 1);
		}
	}
}

5、右上角进入InRightUpTransformer

import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;

public class InRightUpTransformer implements PageTransformer {

	@Override
	public void transformPage(View view, float position) {
		int pageHeight = view.getHeight();
		if (position < -1) {
			view.setAlpha(1);
			view.setTranslationY(0);
		} else if (position <= 0) {
			view.setTranslationY(pageHeight * -position);
			view.setAlpha(1 + position);

			// Android 3.1以下版本的用下面方法；
			// ViewHelper.setTranslationY(view, pageHeight * -position);
			// ViewHelper.setAlpha(view, 1 + position);
		} else if (position <= 1) {
			view.setTranslationY(view.getHeight() * -position);
			view.setAlpha(1 - position);

			// Android 3.1以下版本的用下面方法；
			// ViewHelper.setTranslationY(view, pageHeight * -position);
			// ViewHelper.setAlpha(view, 1 - position);
		} else {
			view.setTranslationY(0);
			view.setAlpha(1);
		}
	}

}

6、右下角进入InRightDownTransformer

import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;

public class InRightDownTransformer implements PageTransformer {

	@Override
	public void transformPage(View view, float position) {
		int pageHeight = view.getHeight();
		if (position < -1) {
			view.setAlpha(1);
			view.setTranslationY(0);
		} else if (position <= 0) {
			view.setTranslationY(pageHeight * position);
			view.setAlpha(1 + position);

			// Android 3.1以下版本的用下面方法；
			// ViewHelper.setTranslationY(view, pageHeight * -position);
			// ViewHelper.setAlpha(view, 1 + position);
		} else if (position <= 1) {
			view.setTranslationY(view.getHeight() * position);
			view.setAlpha(1 - position);

			// Android 3.1以下版本的用下面方法；
			// ViewHelper.setTranslationY(view, pageHeight * -position);
			// ViewHelper.setAlpha(view, 1 - position);
		} else {
			view.setTranslationY(0);
			view.setAlpha(1);
		}
	}

}

7、淡入淡出ZoomOutPageTransformer

import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;

public class ZoomOutPageTransformer implements PageTransformer {
	private static float MIN_SCALE = 0.85f;

	private static float MIN_ALPHA = 0.5f;

	@Override
	public void transformPage(View view, float position) {
		int pageWidth = view.getWidth();
		int pageHeight = view.getHeight();

		if (position < -1) { // [-Infinity,-1)
								// This page is way off-screen to the left.
			view.setAlpha(0);
			view.setTranslationX(0);
		} else if (position <= 1) { // [-1,1]
									// Modify the default slide transition to
									// shrink the page as well
			float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
			float vertMargin = pageHeight * (1 - scaleFactor) / 2;
			float horzMargin = pageWidth * (1 - scaleFactor) / 2;
			if (position < 0) {
				view.setTranslationX(horzMargin - vertMargin / 2);
			} else {
				view.setTranslationX(-horzMargin + vertMargin / 2);
			}
			// Scale the page down (between MIN_SCALE and 1)
			view.setScaleX(scaleFactor);
			view.setScaleY(scaleFactor);
			// Fade the page relative to its size.
			view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)
					/ (1 - MIN_SCALE) * (1 - MIN_ALPHA));
		} else { // (1,+Infinity]
					// This page is way off-screen to the right.
			view.setAlpha(0);
			view.setTranslationX(0);
		}
	}
}

最后，原谅我不会录制短片，截图出来的效果不咋地，于是没附上图片。

我也是一名新手，文章写的不好请见谅，希望和大家一起进步~

源码点击这里

来源：CSDN

作者：Luyifei666

链接：https://blog.csdn.net/qq_24531461/article/details/53421542

标签

viewpager

动画

context