实现ViewPager的不同滑动效果

给ViewPager滑动加一个动画.
在我之前的博客模仿知乎安卓客户端的banner广告条以及一些思考中有写到利用viewPager的PageTransformer来实现各种不同的viewPager的滑动效果,这次我就写了9种不同的效果来练习一下.

代码在我的github
这里面用的知识点也不是很多,主要是和view变换有关的

1. View.setPivotX()设置锚点的X坐标值
2. View.setPivotY()设置锚点的Y坐标值
3. View.setScaleX()设置x轴的缩放系数
4. View.setScaleY()设置Y轴的缩放系数
5. View.setTranslationX()设置在X轴的平移值
6. View.setTranslationY()设置在Y轴的平移值
7. View.setTranslationZ()设置在Z轴的平移值
8. View.setRotationX()设置绕X轴旋转中心的的旋转角度,旋转轴位置可以由View.setPivotY()设置Y轴的旋转中心
9. View.setRotationY()设置绕Y轴旋转中心的的旋转角度,旋转轴位置可以由View.setPivotX()设置X轴的旋转中心
10.View.setRotationZ()设置绕Z轴旋转中心的旋转角度,旋转中心由以上两个设置.
11.View.setCameraDistance()设置相机距离View的距离,避免产生在绕Y轴或者X轴的旋转时产生画面糊脸的效果,一般要设置大一点.
12.View.setAlpha()设置透明度

书籍翻页渐隐

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

public class BookFlippageFadePageTransormer implements ViewPager.PageTransformer { @Override public void transformPage(View page, float position) { if (position <= - 1) { /*页面已经在屏幕左侧且不可视*/ page.setAlpha(position); } else if (position <= 0) { /*页面从左侧进入或者向左侧滑出的状态*/ page.setAlpha( 1 + position); page.setPivotY(page.getHeight() / 2); page.setPivotX( 0); page.setCameraDistance( 60000); /*调整摄像机的位置，避免出现糊脸的感觉*/ page.setRotationY((position * 180)); page.setTranslationX(position * -page.getWidth()); } else if (position <= 1) { /*页面从右侧进入或者向右侧滑出的状态*/ page.setTranslationX(position * -page.getWidth()); } else if (position > 1) { /*页面已经在屏幕右侧且不可视*/ page.setTranslationX(position * -page.getWidth()); } } }

翻页旋转

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

public class FilpPageRotationPageTransformer implements ViewPager.PageTransformer { @Override public void transformPage(View page, float position) { if (position < - 1) { /* [-Infinity,-1)*/ /*页面已经在屏幕左侧且不可视*/ } else if (position <= 0) { /* [-1,0]*/ /*页面从左侧进入或者向左侧滑出的状态*/ page.setCameraDistance( 60000); page.setAlpha( 1 + position); page.setTranslationX(page.getWidth() * -position); page.setPivotX( 0); page.setRotationY(position * 90); } else if (position <= 1) { /* (0,1]*/ /*页面从右侧进入或者向右侧滑出的状态*/ page.setCameraDistance( 60000); page.setTranslationX(page.getWidth() * -position); page.setPivotX( 0); page.setRotationY(position * 90); page.setAlpha( 1 - position); } else if (position > 1) { /*页面已经在屏幕右侧且不可视*/ } } }

卡片绕中心旋转

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

public class CardFlipoverPageTransormer implements PageTransformer { @Override public void transformPage(View page, float position) { if (position <= - 1) { /*页面已经在屏幕左侧且不可视*/ /*设置离开的page不可点击,不可见*/ page.setClickable( false); page.setAlpha( 0); } else if (position <= 0) { page.setClickable( false); /*页面从左侧进入或者向左侧滑出的状态*/ /*把旋转中心改为中间*/ page.setAlpha( 1); if (position <= - 0.5) /*旋转到中间时该页page隐藏掉*/ page.setAlpha( 0); page.setPivotX(page.getWidth() / 2); page.setPivotY(page.getHeight() / 2); page.setTranslationX(position * -page.getWidth()); page.setCameraDistance( 10000); page.setRotationY(position * 180); } else if (position <= 1) { /*页面从右侧进入或者向右侧滑出的状态*/ /*初始状态要是隐藏状态*/ page.setAlpha( 0); if (position <= 0.5) /*旋转到中间时该页page显示出来*/ page.setAlpha( 1); page.setPivotX(page.getWidth() / 2); page.setPivotY(page.getHeight() / 2); page.setTranslationX(position * -page.getWidth()); page.setCameraDistance( 10000); page.setRotationY(- 180 - ( 1 - position) * 180); } else if (position >= 1) { /*页面已经在屏幕右侧且不可视*/ } } }

立方体旋转

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

public class CubesPageTransformer implements ViewPager.PageTransformer { @Override public void transformPage(View page, float position) { if (position <=- 1) { /* [-Infinity,-1)*/ /*页面已经在屏幕左侧且不可视*/ } else if (position <= 0) { /* [-1,0]*/ /*页面从左侧进入或者向左侧滑出的状态*/ page.setCameraDistance( 100000); page.setPivotX(page.getMeasuredWidth()); page.setPivotY(page.getMeasuredHeight()* 0.5f); page.setRotationY( 90*position); } else if (position <= 1) { /* (0,1]*/ /*页面从右侧进入或者向右侧滑出的状态*/ page.setCameraDistance( 100000); page.setPivotX( 0); page.setPivotY( page.getWidth()*( 0.5f)); page.setRotationY( 90*position); } else if (position > 1){ /*页面已经在屏幕右侧且不可视*/ } } }

转盘旋转

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

public class TurntablePageTransformer implements ViewPager.PageTransformer { @Override public void transformPage(View page, float position) { if (position < - 1) { /* [-Infinity,-1)*/ /*页面已经在屏幕左侧且不可视*/ } else if (position <= 0) { /* [-1,0]*/ /*页面从左侧进入或者向左侧滑出的状态*/ page.setPivotX(page.getWidth() / 2); page.setPivotY(page.getHeight()); page.setRotation( 90*position); } else if (position <= 1) { /* (0,1]*/ /*页面从右侧进入或者向右侧滑出的状态*/ page.setPivotX(page.getWidth() / 2); page.setPivotY(page.getHeight()); page.setRotation( 90*position); } else if (position > 1) { /*页面已经在屏幕右侧且不可视*/ } } }

层叠缩放

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

public class CascadeZoomPageTransformer implements ViewPager.PageTransformer { @Override public void transformPage(View page, float position) { if (position < - 1) { /* [-Infinity,-1)*/ /*页面已经在屏幕左侧且不可视*/ } else if (position <= 0) { /* [-1,0]*/ /*页面从左侧进入或者向左侧滑出的状态*/ page.setAlpha( 1 + position); } else if (position <= 1) { /* (0,1]*/ /*页面从右侧进入或者向右侧滑出的状态*/ page.setTranslationX(page.getWidth() * -position); page.setScaleX( 1-position* 0.5f); page.setScaleY( 1-position* 0.5f); page.setAlpha( 1 - position); } else if (position > 1){ /*页面已经在屏幕右侧且不可视*/ } } }

折叠向上

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

/** * Created by M on 2017/9/21. * 这个要配和在ViewPager里设置android:clipChildren="false" * android:margin="xxdp" * 在ViewPager的外层里设置android:clipChildren="false" */ public class DepthCardTransformer implements ViewPager.PageTransformer { @Override public void transformPage(View page, float position) { if (position < - 1) { /* [-Infinity,-1)*/ /*页面已经在屏幕左侧第一个*/ page.setCameraDistance( 10000); page.setPivotX(page.getWidth()/ 2); page.setPivotY(page.getWidth()); page.setRotationY( 20); } else if (position <= 0) { /* [-1,0]*/ /*页面从左侧进入或者向左侧滑出的状态*/ page.setCameraDistance( 10000); page.setPivotX(page.getWidth()/ 2); page.setPivotY(page.getWidth()); page.setRotationY(- 20+( 1-position)* 20); } else if (position <= 1) { /* (0,1]*/ /*页面从右侧进入或者向右侧滑出的状态*/ page.setCameraDistance( 10000); page.setPivotX(page.getWidth()/ 2); page.setPivotY(page.getWidth()); page.setRotationY(- 20+( 1-position)* 20); } else if (position<= 2) { /*页面已经在屏幕右侧第一个*/ page.setCameraDistance( 10000); page.setPivotX(page.getWidth()/ 2); page.setPivotY(page.getWidth()); page.setRotationY(- 20); } } }

滑动缩放

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

/** * Created by M on 2017/9/21. * 这个要配和在ViewPager里设置android:clipChildren="false" * android:margin="xxdp" * 在ViewPager的外层里设置android:clipChildren="false" */ public class ZoominPagerTransFormer implements ViewPager.PageTransformer { @Override public void transformPage(View page, float position) { if (position < - 1) { /* [-Infinity,-1)*/ /*页面已经在屏幕左侧且不可视*/ page.setScaleX(( float) ( 1 + position * 0.1)); page.setScaleY(( float) ( 1 + position * 0.1)); } else if (position <= 0) { /* [-1,0]*/ /*页面从左侧进入或者向左侧滑出的状态*/ page.setScaleX(( float) ( 1 + position * 0.1)); page.setScaleY(( float) ( 1 + position * 0.1)); } else if (position <= 1) { /* (0,1]*/ /*页面从右侧进入或者向右侧滑出的状态*/ page.setScaleX(( float) ( 1- position * 0.1)); page.setScaleY(( float) ( 1 - position * 0.1)); } else if (position > 1) { /*页面已经在屏幕右侧且不可视*/ page.setScaleX(( float) ( 1- position * 0.1)); page.setScaleY(( float) ( 1 - position * 0.1)); } } }

卡片堆叠

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

public class CardStackPaegTransformer implements ViewPager.PageTransformer { public void transformPage(View page, float position) { if (position <= - 1) { /*页面已经在屏幕左侧且不可视*/ } else if (position <= 0) { /*页面从左侧进入或者向左侧滑出的状态*/ } else if (position < 1) { /*页面从右侧进入或者向右侧滑出的状态*/ page.setAlpha(( float) ( 1 - position * 0.1)); page.setPivotX(page.getWidth() / 2f); page.setPivotY(page.getHeight() / 2f); page.setScaleX(( float) Math.pow( 0.9f, position)); /*0.9f为缩放系数*/ page.setScaleY(( float) Math.pow( 0.9f, position)); page.setTranslationX(position * -page.getWidth()); page.setTranslationY(-position * 70); /*70每层card的Y轴间隔*/ } else if (position >= 1) { /*页面已经在屏幕右侧且不可视*/ page.setAlpha(( float) ( 1 - position * 0.1)); page.setPivotX(page.getWidth() / 2f); page.setPivotY(page.getHeight() / 2f); page.setScaleX(( float) Math.pow( 0.9f, position)); page.setScaleY(( float) Math.pow( 0.9f, position)); page.setTranslationX(position * -page.getWidth()); page.setTranslationY(-position * 70); } } }

卡片堆叠 进阶版

这个进阶版可以看到是在滑动结束后有一个弹跳的类似于果冻动画,这个实际上我是对Viewpage设置了滑动监听,在滑动状态改变时对当前的page设置一个缩放动画,这样就好了
下面是果冻动画的代码,这里安利一个网站http://inloop.github.io/interpolator/,这个网站可以直观看到不同插值器的曲线变化情况,我的这个插值器也是在这里经过调整之后得到的.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

/*配合以下代码可以实现滑动结束后的果冻效果*/ int mCurrentPosition= 0; float mFactor = 0.5f; mAnimation = new ScaleAnimation( 0.9f, 1.0f, 0.9f, 1.0f, 150, 450); mAnimation.setDuration( 500); mAnimation.setFillAfter( true); mAnimation.setInterpolator( new Interpolator() { @Override public float getInterpolation(float input) { return ( float) (Math.pow( 2, - 10 * input) * Math.sin((input - mFactor / 4) * ( 2 * Math.PI) / mFactor) + 0.9); } }); mViewPager.addOnPageChangeListener( new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { Log.d( "MainActivity", "onPageScrolled: position" + position + " positionOffset" + positionOffset + " positionOffsetPixels" + positionOffsetPixels); } @Override public void onPageSelected(int position) { Log.d( "MainActivity", "onPageSelected: position" + position); mImageViewList.get(mCurrentPosition ).clearAnimation(); /*//把上一个page的动画取消掉*/ mCurrentPosition = position; /*更新当前的page位置*/ mImageViewList.get(mCurrentPosition).startAnimation(mAnimation); /*开始动画*/ } @Override public void onPageScrollStateChanged(int state) { Log.d( "MainActivity", "onPageScrollStateChanged: state" + state); } });