【MyAndroid】viewpage+cardView卡片叠层效果展示（2）--100个经典UI设计模板(98/100)

搞了大半个月凑合着叠层效果

开源代码地址：https://gitee.com/lc951/my-android

这里使用的是viewpager + cardView组件。全部是原生组件几乎没有自定义组件。
动画效果使用的是viewpager自带的接口类ViewPager.PageTransformer，官方有两个例子也有许多博主解析过原理参考里会有笔者觉得不错的博客访问链接，有兴趣可以看看哈！

如果读者大佬留心会发现我打算写一个专题为《大前端极简开发入门》，笔者本人的风格也是简约风。所以也就不啰嗦viewpager中ViewPager.PageTransformer的动画原理和底层实现计算，实在是就算讲了也需要很长的时间来理解里面的一些很专业且晦涩难懂的实现原理。如果实在是想搞清楚可以多看看笔者留下的参考链接。

动画效果有：缩放、移动、透明度设置；单个或多个叠加即可达到动画效果

第一步：把原本左右滑动的pager页面固定到同一个位置

代码如下：

 public void transformPage(@NonNull View page, float position) {//设置透明度
//        page.setAlpha(0.5f);//设置每个View在中间，即设置相对原位置偏移量page.setTranslationX((-page.getWidth() * position));}

viewpager设置代码如下：

 CardOverlayTransformer transformer=new CardOverlayTransformer();
vp.setPageTransformer(true, transformer);

如上图看上去就是这样哈！上面是一个对比效果暂时不用搭理
接着把透明度效果加上

三张图片就叠加到一起了。

第二步：加竖向移动（竖向移动比较好理解，不涉及左右滑动的计算因素）

public class CardOverlayTransformer implements ViewPager.PageTransformer{private float mOffset = 40;@Overridepublic void transformPage(@NonNull View page, float position) {//设置透明度page.setAlpha(0.5f);//设置每个View在中间，即设置相对原位置偏移量page.setTranslationX((-page.getWidth() * position));//移动Y轴坐标page.setTranslationY(position * mOffset);}
}

效果图如下：

这个时候左右滑动还是无效
接着加position参数处理

public class CardOverlayTransformer implements ViewPager.PageTransformer{private float mOffset = 40;@Overridepublic void transformPage(@NonNull View page, float position) {//设置透明度page.setAlpha(0.5f);if(position<=0){//移动到左侧区域的pager页面}else{//移动到右侧的pager页面//设置每个View在中间，即设置相对原位置偏移量page.setTranslationX((-page.getWidth() * position));//移动Y轴坐标page.setTranslationY(position * mOffset);}}
}

上面是系统自带动画效果，下面是自定义动画效果作对比就很有眼感了
这里需要说明position的作用，参考其他博客position是页面数量决定的。大致上是[-pager页数，+pager页数]；后面那个+号有些多余哈！不过还是加上进行对比。因为本博客就是一个用对比来实现效果的。可见的区域是[-1,0,1]这个范围的。这个是笔者加了限制参数viewPager.setOffscreenPageLimit(3)

第三步：进行缩放

代码如下：


public class CardOverlayTransformer implements ViewPager.PageTransformer{private float mOffset = 40;@Overridepublic void transformPage(@NonNull View page, float position) {//设置透明度page.setAlpha(0.5f);if(position<=0){//移动到左侧区域的pager页面}else{//移动到右侧的pager页面//设置每个View在中间，即设置相对原位置偏移量page.setTranslationX((-page.getWidth() * position));//移动Y轴坐标page.setTranslationY(position * mOffset);//缩放卡片并调整位置float scale = (page.getWidth() + mOffset * position) / page.getWidth();page.setScaleX(scale);page.setScaleY(scale);}}
}

效果如下：

到这里基本动画效果就加满了。接着就是调试动画相关参数和左右滑动时position变化的相关逻辑
其中的过程就不累赘了
竖向卡片叠加层次实现如下：

 Log.i(TAG, "position =" + position);
//        page.setAlpha(0.5f);if (mViewPager == null) {mViewPager = (ViewPager) page.getParent();}int current=mViewPager.getCurrentItem();Log.i(TAG,"current="+current);int pageWidth = page.getWidth();int pageHeight = page.getHeight();
//page.setPivotX(pageWidth / 2);if(position<=0){page.setTranslationX(-position * page.getWidth());//缩放卡片并调整位置float scale = (page.getWidth() + mOffset * position) / page.getWidth();page.setScaleX(scale);page.setScaleY(scale);page.setTranslationY((position) * mOffset+2.5f*current*mOffset);page.setTranslationZ(position);page.setPivotY(-1.5f*pageHeight);}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+2.5f*current*mOffset);page.setTranslationZ(-position);page.setPivotY(1.5f*pageHeight);}}

效果如下：

横向的就不啰嗦了，参考开源项目里代码即可。
补充一下布局和相关设置
viewpager 布局文件

<android.support.v4.view.ViewPagerandroid:id="@+id/view_pager"android:layout_width="match_parent"android:layout_height="wrap_content"tools:background="#55ff0000"app:layout_constraintTop_toTopOf="parent"android:importantForAccessibility="no"tools:ignore="MissingConstraints"android:clipToPadding="false"android:clipChildren="false"android:layout_margin="10dp"android:layout_gravity="left"/>

注意设置： android:clipToPadding =false；android:clipChildren=false；这个是为了一屏多页设置的效果，目的是展示viewpager边界以外和padding都可见画面。

cardview

<android.support.v7.widget.CardViewandroid:id="@+id/card_view"android:layout_width="278dp"android:layout_height="157dp"app:cardBackgroundColor="#ffffff"app:cardCornerRadius="8dp">。。。。</android.support.v7.widget.CardView>

viewpager 相关设置

viewPager.setOffscreenPageLimit(3);

结语

就不再啰嗦了，想要调试出UI设计的效果，估计会把这篇博客看个三遍以上，都是同行懂其中的痛。
读者大佬如果看得上请收藏开源项目，笔者争取搞出100个页面特效来以后就不用像现在这样一搞动画差点搞个把月还熬五六个深夜。如果累了就先喝口水。

参考：

https://www.imooc.com/article/274387
http://crazysunj.com/2017/06/25/%E4%B8%80%E8%A1%8C%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0ViewPager%E5%8D%A1%E7%89%87%E6%95%88%E6%9E%9C/
https://blog.csdn.net/chuyouyinghe/article/details/118611973
https://blog.csdn.net/qq_21793463/article/details/52225502
https://blog.csdn.net/qq_33229171/article/details/88937597