Android 自定义ViewPager酷炫切换动画

首先看一下ViewPager自带的滑动效果:

Android 自定义ViewPager酷炫切换动画_第1张图片

那么如何打造属于自己的切换效果呢?
当viewpager上一个可见或依附的页面发生了滚动事件就会调用PageTransformer,这让应用可以使用自定义transformation让viewpager某一个页面视图上实现某些特定的动画属性。

只需要一行代码就可以实现自定义动画切换功能,
类似于下面的代码:

mPager.setPageTransformer(true, new Transformation());

如果要自定义切换,需要实现transformPage ,先看一下这个方法的参数:

void transformPage (View page, float position)

view指的是当前切换动画应用的view,
position比较特殊:
一:当前页面为0,左边的页面为-1,右边的页面为1
二:当前页面左滑,是一个从0到-1的过程,右滑是从0到1的过程

下面介绍一种我比较喜欢的动画效果:
Android 自定义ViewPager酷炫切换动画_第2张图片
直接上代码:

    private float mMinAlpha = 0.6f;
    private float transitionY = 90.0f;

    /**
     * @param page
     * @param position
     */
    @Override
    public void transformPage(View page, float position) {
        if (position <= -1 || position >= 1){//中间两边的ViewPager,已经彻底移出
            page.setAlpha(mMinAlpha);
            page.setTranslationY(transitionY);
        } else if (position < 1) {//范围是:[-1,1]
            //从中间向左或向右一点点移动
            if (position > -1&&position < 0) {
                float factor = mMinAlpha + (1 - mMinAlpha) * (1 + position);
                float realTransition = transitionY *(-1 * position);
                page.setAlpha(factor);
                page.setTranslationY(realTransition);
            }else if(position < 1 && position > 0){
                float factor = mMinAlpha + (1 - mMinAlpha) * (1 - position);
                float realTransition = transitionY * position;
                page.setAlpha(factor);
                page.setTranslationY(realTransition);
            }
        }
    }

下面再看一种效果:

代码:

    @Override
    protected void onTransform(View view, float position) {
        view.setPivotX(position < 0f ? view.getWidth() : 0f);
        view.setPivotY(view.getHeight() * 0.5f);
        view.setRotationY(90f * position);
    }

    @Override
    public boolean isPagingEnabled() {
        return true;
    }

除了以上两种效果,还有十几种酷炫的效果,有兴趣的可以在自己的项目中试试,
我把它做成了一个第三方的Library:

使用:
1.在整个项目的build.gradle中添加:

allprojects {
    repositories {
        jcenter()
        maven { url 'https://www.jitpack.io' }
    }
}

2.在app Module的build.gradle中添加:

compile 'com.github.ckwcc:ViewPagerTransformer:1.0.2'

3.使用:

viewPager.setPageTransformer(true,new xxxTransformer());

只要打出Transformer,弹出的提示项里面就会有各种可供选择的切换效果啦!

你可能感兴趣的:(Android)