使用viewpager 实现卡片叠加效果

今天要显示的效果如下：

image

来简单分析一下，这种刮刮乐的效果，可以用viewpager的来实现，只要拿到 transformPage(@NonNull View view, float position) ，通过 position 来控制显示的位置即可。

view 为当前的可视部分，position 则为滑动状态的值，有 -1,0,1 三种模式。0 表示的是最顶端的视图，-1 则表示左边的view，1则表示右边的view，具体如下：

image

如果我们要让它像效果图那样叠加，则可以通过这个改变 x 的坐标，初步代码如下：

@Override
    public void transformPage(@NonNull View view, float position) {
        view.setAlpha(0.4f);
        view.setTranslationX(-view.getWidth() * position);
    }

image

接着分析，为了让它有缩放和向下偏移的效果，需要对后面的view进行缩放和向下移，所以代码改为：

@Override
public void transformPage(@NonNull View view, float position) {
  
    view.setTranslationX(-view.getWidth() * position);
    float scale = (view.getWidth() - mCardHeight * position) / view.getWidth();
    view.setScaleX(scale);
    view.setScaleY(scale);
    view.setClickable(false);
    view.setTranslationY(mCardHeight * position);

}

mCardHeight 表示一个简单数值，我这里用 20 表示，然后再把viewpager 的缓存设置为3，这里叠加效果才更明显；

image

接着，发现无法移动，当然了，因为所有的veiw都被设置了，需要对当前view进行特殊处理，最终代码如下：

public class CardTransformer implements ViewPager.PageTransformer {
    private float mCardHeight = 10;

    public CardTransformer(float cardheight) {
        this.mCardHeight = cardheight;
    }

    @Override
    public void transformPage(@NonNull View view, float position) {
        if (position <= 0){
            view.setTranslationX(0f);
            view.setClickable(true);
        }else {
            view.setTranslationX(-view.getWidth() * position);
            float scale = (view.getWidth() - mCardHeight * position) / view.getWidth();
            view.setScaleX(scale);
            view.setScaleY(scale);
            view.setClickable(false);
            view.setTranslationY(mCardHeight * position);
        }

    }
}

然后把它设置给 viewpager 的 pageTransformer 即可。

当然，我这里已经封装好了一个 Viewpager 的工具类，实现的效果如下:

项目地址： https://github.com/LillteZheng/ViewPagerHelper