android 卡片投影渐变,受Duolingo启发的ViewPager卡片效果

如果你曾经使用过Duolingo，你很可能注意过这个部件：

看着很酷是吧？我对Duolingo团队是如何做到这个样子的很感兴趣，于是自己搭建了个项目来实现这种效果。

这与普通ViewPager的主要区别在于，你可以同时看到3个item，其中两个只能看到部分。

我做的第一件事就是创建拥有一个CardView的简单布局：

当adapter完成之后，在activity里设置好ViewPager：

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true">

android:id="@+id/viewPager"

android:layout_width="match_parent"

android:layout_height="330dp"

android:layout_gravity="bottom"

android:clipToPadding="false"

android:overScrollMode="never"

android:paddingBottom="30dp"

android:paddingEnd="@dimen/card_padding"

android:paddingLeft="@dimen/card_padding"

android:paddingRight="@dimen/card_padding"

android:paddingStart="@dimen/card_padding" />

这里最重要的就是clipToPadding属性。当它为false时，ViewPager并不会剪掉我们想部分显示的View，而当前的item又能在中间。

通过改变card_padding，你能改变view的宽度。在这个例子中，我使用了60dp来得到类似Duolingo的效果。

当设置完这些之后，我们应该已经有了三个可见的item了，一个剧终，另外两个部分可见。现在我们只需要实现卡片的动画立体效果。

阴影动画

为此，我创建了一个实现了OnPageChangeListener 和 PageTransformer 的ShadowTransformer。当用户滑动到下一张卡片的时候，它应该变高，而前一张卡片则变低。

这是通过CardView的setCardElevation方法，根据scroll offset产生的恰当因素而实现的。在本例中，CardView的基准高度是默认的(2dp)，而卡片可以上升到16dp。

最终效果：