有的时候产品会要求Banner的各种滑动动画,比如
一般都是用viewpager来做这种效果,那要是达到这种效果就需要自己实现ViewPager.PageTransformer接口。ViewPager.PageTransformer它只有一个需要重写的方法transformPage(View view,float position); view就是页面我们可以通过设置各种平移旋转等达到动画效果,而position 它就是xian相当于一个偏移量,可以把正中间屏幕显示完整的page的position当成0,而它左边的position就是-1,右边的page的position就是 1。当你滑动的时候就会有相应的位置变化,我们可以ge根据这个位置的变化动态设置一些参数达到动画效果。
当我们实现ViewPager.PageTransformer接口之后再通过ViewPager.setPageTransformer(ViewPager.PageTransformer vp) 方法设置到ViePager中 这样就达到了需要的效果。
上面的动画效果实现:
public class TransformA implements ViewPager.PageTransformer {
private static final float CENTER_PAGE_SCALE = 0.8f;
private int offscreenPageLimit;
private ViewPager boundViewPager;
public TransformA ( ViewPager boundViewPager) {
this.boundViewPager = boundViewPager;
this.offscreenPageLimit = boundViewPager.getOffscreenPageLimit();
}
@Override
public void transformPage( View view, float position) {
int pagerWidth = boundViewPager.getWidth();
float horizontalOffsetBase = (pagerWidth - pagerWidth * CENTER_PAGE_SCALE) / 2 / offscreenPageLimit + 15;
if (position >= offscreenPageLimit || position <= -1) {
view.setVisibility(View.GONE);
} else {
view.setVisibility(View.VISIBLE);
}
if (position >= 0) {
float translationX = (horizontalOffsetBase - view.getWidth()) * position;
view.setTranslationX(translationX);
}
if (position > -1 && position < 0) {
float rotation = position * 30;
view.setRotation(rotation);
view.setAlpha((position * position * position + 1));
} else if (position > offscreenPageLimit - 1) {
view.setAlpha((float) (1 - position + Math.floor(position)));
} else {
view.setRotation(0);
view.setAlpha(1);
}
if (position == 0) {
view.setScaleX(CENTER_PAGE_SCALE);
view.setScaleY(CENTER_PAGE_SCALE);
} else {
float scaleFactor = Math.min(CENTER_PAGE_SCALE - position * 0.1f, CENTER_PAGE_SCALE);
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
}
ViewCompat.setElevation(view, (offscreenPageLimit - position) * 5);
}
}
这个动画效果的实现:
public class TransformB implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View page, float position) {
final int pageWidth = page.getWidth();
final float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
if (position < 0) { // [-1,0]
// Scale the page down (between MIN_SCALE and 1)
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
} else if (position == 0) {
page.setScaleX(1);
page.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Scale the page down (between MIN_SCALE and 1)
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
}
}
}