Android开发之ViewPager切换动画

今天带来ViewPager的切换动画，先来看下效果图：

 

ViewPager画廊效果

 

我们让可见区域[-1,1]根据position值的变化做了一些动作，假设页面往左滑：
1、在区间[-1,0）里是从0到-1，也就是透明度随着position的减小而减小，最终为0.5f（半透明）。
2、在区间(0,1)里是从1到0，也就是透明度随着position的减小而增大，最终为1f（不透明）。
3、它们的缩放规则是随着position减小，先小后大，因为这边有个绝对值abs方法和最大数max方法作用着，当position的绝对值大于0.9f的时候，页面才开始放大。

 

画廊效果实现的工具方法类

 

package com.lcw.dynamicviewpager.transformer;

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

/**
 * 画廊效果Transformer（半透明+缩放）
 * Create by: chenwei.li
 * Date: 2017/12/8
 * time: 14:55
 * Email: lichenwei.me@foxmail.com
 */

public class GalleryTransformer implements ViewPager.PageTransformer {

    private static final float MAX_ALPHA=0.5f;
    private static final float MAX_SCALE=0.9f;

    @Override
    public void transformPage(View page, float position) {
        if(position<-1||position>1){
            //不可见区域
            page.setAlpha(MAX_ALPHA);
            page.setScaleX(MAX_SCALE);
            page.setScaleY(MAX_SCALE);
        }else {
            //透明度效果
            if(position<=0){
                //pos区域[-1,0)
                page.setAlpha(MAX_ALPHA+MAX_ALPHA*(1+position));
            }else{
                //pos区域[0,1]
                page.setAlpha(MAX_ALPHA+MAX_ALPHA*(1-position));
            }
            //缩放效果
            float scale=Math.max(MAX_SCALE,1-Math.abs(position));
            page.setScaleX(scale);
            page.setScaleY(scale);
        }
    }
}

 

ViewPager卡片效果

 

卡片效果实现的工具方法类

package com.lcw.dynamicviewpager.transformer;

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

/**
 * 卡片效果Transformer
 * Create by: chenwei.li
 * Date: 2017/12/8
 * time: 14:55
 * Email: lichenwei.me@foxmail.com
 */

public class CardTransformer implements ViewPager.PageTransformer {

    private int mOffset = 60;

    @Override
    public void transformPage(View page, float position) {

        if (position <= 0) {
            page.setRotation(45 * position);
            page.setTranslationX((page.getWidth() / 2 * position));
        } else {
            //移动X轴坐标，使得卡片在同一坐标
            page.setTranslationX(-position * page.getWidth());
            //缩放卡片并调整位置
            float scale = (page.getWidth() - mOffset * position) / page.getWidth();
            page.setScaleX(scale);
            page.setScaleY(scale);
            //移动Y轴坐标
            page.setTranslationY(position * mOffset);
        }


    }
}

 

 

画廊效果使用方法：

mViewPager = (ViewPager) findViewById(R.id.vp_main_pager);
mViewPagerAdapter = new ViewPagerAdapter(this, mImages);
mViewPager.setOffscreenPageLimit(3);
mViewPager.setPageMargin(30);
mViewPager.setAdapter(mViewPagerAdapter);
mViewPager.setPageTransformer(false, new GalleryTransformer());

卡片效果使用方法：

mViewPager= (ViewPager) findViewById(R.id.vp_main_pager);
mViewPagerAdapter=new ViewPagerAdapter(this,mImages);
mViewPager.setAdapter(mViewPagerAdapter);
mViewPager.setOffscreenPageLimit(5);
mViewPager.setPageTransformer(true,new CardTransformer());

 

原文地址:https://mp.youkuaiyun.com/postedit/94430271