深度解析ViewPager 页面 滑动效果PageTransformer

在 public void transformPage(View view, float position) 方法中, 会传递两个参数, 且 该View 对应 当前的 position 

position为float类型,可知position可为小数,position 有一下几个区间: 

1.position=0,静止状态下当前显示的page的位置

2.position=1,静止状态下,当前page右边的第一个page的位置,依此类推,逐渐+1

3.position=-1,静止状态下,当前page左边的第一个page的位置,此次类推,逐渐+1

4.当前page往右滑动,position 从0->1,原先page为1的position 从1-2;position为-1的从-1->0;以此类推

5.当前page往左滑动,position 从0->-1,原先page为1的position 从1->0;position为-1的从-1->-2;以此类推

注意:position的范围往往受到ViewPager一个属性影响,vp.setOffscreenPageLimit(int offset);

一般来说position的变化区间是可见的部分[-offset,offset],不可见的两部分小于负offset,和大于offset;当我们滑动的时候position的数值是变化的,往右边滑动view对应的position递增;往左边滑动view对应的position递减变化;

1.ViewPager默认的滑动效果时,平移效果;

2.如果我们要设置透明度逐渐变化效果调用view.setAlpha();可以达到,根据position的变化来设置透明度变化程度

3.如果要设置随着位置变化而翻转,(注意不是旋转,旋转是二维变化,翻转有点3D的感觉)调用view.setScallY();这里面的参数是弧度,而不是度数;还有view.setScallX();

4.如果要设置旋转,view.setRotation...等方法

5.设置view的未知变化,view.setTranslation...等方法

网上常见的效果一些效果就是以上方法组合而来;其实这写效果就相当于一个函数关系,给定一个positon的区间,实现view的效果;注意position的任何取值都不能遗漏,否则可能会出现问题;

最后附上自己实现的效果,类似3D环视,水面倒影另外实现就可以了

public class RotatePageTransformer implements ViewPager.PageTransformer {

@Override

public void transformPage(View view, float arg1) {

view.setRotationY(getRotate(arg1));

if (arg1 > 1) {

view.setScaleY(getScall(arg1));

} else if (arg1 < 0) {

view.setScaleY(getScall(arg1));

}else {

view.setScaleY(getScall(0));

}

if (arg1 > 0) {

float abs = Math.abs(getRotate(arg1));

double cos = Math.cos(abs / 180 * Math.PI);

float translationX = -(float) (view.getWidth() - view.getWidth() * Math.abs(cos));

view.setTranslationX(translationX);

// Log.i("", "-->position " + arg1 + " cos " + cos + " abs " + abs

// + " translationX " + translationX);

} else {

float abs = Math.abs(getRotate(arg1));

double cos = Math.cos(abs / 180 * Math.PI);

float translationX = (float) (view.getWidth() - view.getWidth() * Math.abs(cos));

view.setTranslationX(translationX);

// Log.i("", "-->position " + arg1 + " cos " + cos + " abs " + abs

// + " translationX " + translationX);

}

if (arg1 == 0) {

} else if (arg1 <= 1 && arg1 > 0) {

} else if (arg1 <= 2 && arg1 > 1) {

} else if (arg1 <= 3 && arg1 > 2) {

} else if (arg1 < 0 && arg1 >= -1) {

} else if (arg1 < -1 && arg1 >= -2) {

} else if (arg1 < -2 && arg1 >= -3) {

}

}

private float getRotate(float position) {

if (position <= 0) {

return (-15f) * position;

} else if (position > 1) {

return -(15f) * (position - 1);

} else {

return 0;

}

}

private float getScall(float position) {

float abs = Math.abs(getRotate(position));

float cos = (float) Math.cos(2 * abs / 360 * Math.PI);

// Log.i("", "-->cos " + cos + " abs " + abs);

return (1 / cos - 1) + 1;

}

}