高仿蘑菇街欢迎页
MaxReiniger
7年前
<p>蘑菇街欢迎页</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ff26705538758211cada01003d7a8651.gif"></p> <p style="text-align:center">蘑菇街欢迎页.gif</p> <p>高仿效果</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/c8c9f998f195b387458745a06afad893.gif"></p> <p style="text-align:center">高仿版本.gif</p> <h3><strong>前言</strong></h3> <p>第一次看蘑菇街欢迎页的时候，觉得还是挺复杂的一个页面效果，有点不知从何下手的感觉。不过经过仔细分析后，发现想要实现这种效果，最重要的原理有2点：</p> <p>1.ViewPager切换时，通过offset偏移量动态修改View元素属性</p> <p>2.canvas上细致的控制旋，移，缩，透明等view操作，进行绘制</p> <p>本文将介绍如何对蘑菇街欢迎页效果进行分析，拆分，并一步步实现1个高仿版本。</p> <h3><strong>效果拆解</strong></h3> <p>做之前，经过不断的复看原版效果，分析出其实可以把整体效果拆分为静态，动态2部分。</p> <p><img src="https://simg.open-open.com/show/0e1610240bd75cc26c435e3abe0f08e5.png"></p> <p style="text-align:center">整体布局设计.png</p> <ul> <li> <p>静态效果：1个支持4个页面的ViewPager，每个页面的展示相对固定，不会根据offset进行改变。</p> <ul> <li>第1-4页的顶部文案</li> <li>第4页的开始按钮</li> </ul> </li> <li> <p>动态效果：摆放在viewPager上会变形的自定义View，根据offset动态调整需要绘制的元素的宽高，left，top，透明度等。</p> <ul> <li>第1页->第2页 <ul> <li>0%->50%，矩形背景高度增加，先上移，再下移</li> <li>0%->50%，模特图，文案，下移，渐变消失</li> <li>50%-100%，左右裂变出2张背景图，并左右移开</li> <li>50%->100%，第2页，顶部，底部图，渐变显示</li> <li>50%->100%，第2页，3张模特图逐步放大显示</li> <li>0%->100%，底部背景图跟随向左偏移，并消失</li> </ul> </li> <li>第2页->第3页 <ul> <li>0%->50%，矩形背景宽度减少，上移</li> <li>0%->50%，顶部，底部图，3张模特图渐变消失</li> <li>0%->50%，2张裂变背景图跟随向左偏移，并消失</li> <li>50%->100%，第3页，6张模特图逐步放大，渐变显示</li> </ul> </li> <li>第3页->第4页 <ul> <li>0%->50%，矩形背景宽度，高度减少，并逆时针进行旋转</li> <li>0%->50%，6张模特图缩小，渐变消失</li> <li>50%->100%，左右裂变出2张背景图，并左右移开</li> <li>50%->100%，顶部模特，文案，渐变显示</li> <li>50%->100%，底部3长模特图逐步放大，渐变显示</li> </ul> </li> </ul> </li> </ul> <h3><strong>实现步骤</strong></h3> <p>分析完整体要做哪些以后，需要分步骤，从简单的开始一步步实现</p> <p>1.先把静态的ViewPager实现</p> <p>2.根据offset实现矩形背景变化</p> <p>3.根据offset实现第1页底部背景，裂变图变化</p> <p>4.根据offset实现页面切换时，每个页面图片元素的隐藏，显示，变形等效果</p> <ul> <li>先把静态的ViewPager实现</li> </ul> <p>自定义ViewPager，每个页面是一个独立layout，可以自由实现顶部文案，和最后一个页面Button</p> <pre> <code class="language-java">public class MoguViewPager extends RelativeLayout { private MoguViewPagerAdapter mAdapter; private ViewPager mViewPager; private List<View> mViewList = new ArrayList<>(); /** 每个页面都是一个layout */ private int[] mLayouts = new int[] {R.layout.guide_view_one, R.layout.guide_view_two, R.layout.guide_view_three, R.layout.guide_view_four}; public MoguViewPager(Context context) { super(context); init(); } public MoguViewPager(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { inflate(getContext(), R.layout.layout_mogu_viewpager, this); mViewPager = (ViewPager) this.findViewById(R.id.viewpager); { /** 初始化4个页面 */ for (int i = 0; i < mLayouts.length; i++) { View view = View.inflate(getContext(), mLayouts[i], null); mViewList.add(view); } } mAdapter = new MoguViewPagerAdapter(mViewList, getContext()); mViewPager.setAdapter(mAdapter); } }</code></pre> <p>xml布局</p> <pre> <code class="language-java"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:clipChildren="false"/> <!--这里准备放个自定义View--> </RelativeLayout></code></pre> <p>第一步完成，实现还是比较简单的，直接看效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/4f72dc5fbf37d6b1cfa1b50de4e53e28.gif"></p> <p style="text-align:center">第1版.gif</p> <ul> <li>根据offset实现矩形背景变化</li> </ul> <p>自定义会变形的TransforView，在xml布局中摆放在ViewPager之上</p> <pre> <code class="language-java"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerHorizontal="true" android:clipChildren="false"/> <com.listen.test_mogu_viewpager.viewpager.TransforView android:id="@+id/transfor_view" android:layout_width="match_parent" android:layout_height="450dp" android:layout_centerInParent="true"/> </RelativeLayout></code></pre> <p>给ViewPager添加addOnPageChangeListener()，在onPageScrolled()的时候将position，positionOffset，positionOffsetPixels传递给TransforView。</p> <pre> <code class="language-java">mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { mTransforView.transfor(position, positionOffset, positionOffsetPixels); } });</code></pre> <p>在TransforView中，首先定义页面切换时变化的参数，比如第1页->第2页会发生的变化有高度放大40%，上移30dp，下移60dp，则只需要定义0.4，-30dp，60dp三个参数即可。</p> <pre> <code class="language-java">/** * 第1页->第2页 * 0%->50%，矩形背景高度增加40%，先上移30dp，再下移60dp */ public static final float FIRST_HEIGHT = 0.4f;// 第1个页面高度缩放比例，正：放大，负：缩小 public final int FIRST_TOP1 = -dp2px(30);// 第1个页面top移动距离，正：下移，负：上移 public final int FIRST_TOP2 = dp2px(60);// 第1个页面top移动距离，正：下移，负：上移 public static final float FIRST_RATE = 0.5f;// 在偏移50%处，进行下一页的显示 /** * 第2页->第3页 * 0%->50%，矩形背景宽度减少15%，上移20dp */ public static final float SECOND_WIDTH = -0.15f;// 第2个页面宽度缩放比例，正：放大，负：缩小 public final int SECOND_TOP = -dp2px(20);// 第2个页面top移动距离比例，正：下移，负：上移 public static final float SECOND_RATE = 0.5f;// 在偏移50%处，进行下一页的显示 /** * 第3页->第4页 * 0%->50%，矩形背景宽度，高度减少10%，并逆时针进行旋转10度 */ public static final float THIRD_WIDTH = -0.1f;// 第3个页面宽度缩放比例，正：放大，负：缩小 public static final float THIRD_HEIGHT = -0.1f;// 第3个页面高度缩放比例，正：放大，负：缩小 public static final int THIRD_DEGREE = -10;// 第3个页面角度调整，正：顺时针，负：逆时针 public static final float THIRD_RATE = 0.5f;// 在偏移50%处，进行下一页的显示 /** * 第1页初始化矩形背景的宽，高，left，top */ private float mPage1RectBgDefaultWidth = dp2px(260); private float mPage1RectBgDefaultHeight = dp2px(230); private float mPage1RectBgDefaultLeft = getScreenWidth() / 2 - mPage1RectBgDefaultWidth / 2;//left=屏幕宽度/2-矩形宽度/2 private float mPage1RectBgDefaultTop = dp2px(80); /** * 第1页->第2页 * 在第1页的基础上进行变化 * 1.height放大 * 2.top先上移n，在下移n*2 */ private float mPage2RectBgDefaultWidth = mPage1RectBgDefaultWidth; private float mPage2RectBgDefaultHeight = mPage1RectBgDefaultHeight * (1 + FIRST_HEIGHT);// 第2页的高度=第一页高度*1.4 private float mPage2RectBgDefaultLeft = mPage1RectBgDefaultLeft; private float mPage2RectBgDefaultTop = mPage1RectBgDefaultTop + FIRST_TOP1 + FIRST_TOP2;//第2页的top=第一页的top-30dp+60dp /** * 第2页->第3页 * 在第2页的基础上进行变化 * 1.宽度缩小 * 2.top上移 */ private float mPage3RectBgDefaultWidth = mPage2RectBgDefaultWidth * (1 + SECOND_WIDTH); private float mPage3RectBgDefaultHeight = mPage2RectBgDefaultHeight; private float mPage3RectBgDefaultLeft = getScreenWidth() / 2 - mPage3RectBgDefaultWidth / 2;//第3页的left=屏幕的宽度/2-矩形背景宽度/2 private float mPage3RectBgDefaultTop = mPage2RectBgDefaultTop + SECOND_TOP; /** * 第3页->第4页 * 在第3页的基础上进行变化 * 1.宽度缩小 * 2.高度缩小 * 2.逆时针旋转 */ private float mPage4RectBgDefaultWidth = mPage3RectBgDefaultWidth * (1 + THIRD_WIDTH); private float mPage4RectBgDefaultHeight = mPage3RectBgDefaultHeight * (1 + THIRD_HEIGHT); private float mPage4RectBgDefaultLeft = getScreenWidth() / 2 - mPage4RectBgDefaultWidth / 2; private float mPage4RectBgDefaultTop = mPage3RectBgDefaultTop; private float mPage4ModelDefaultWidth = (mPage4RectBgDefaultWidth - padding() * 4) / 3;</code></pre> <p>TransforView的transfor()负责接收position，positionOffset，positionOffsetPixels，并根据position判断当前第几页，从而决定要实现哪些效果，通过positionOffset计算view的宽，高，left，top变化比例，实现缩小，放大，左右，上下移动，旋转等效果</p> <pre> <code class="language-java">public void transfor(int position, float positionOffset, int positionOffsetPixels) { mCurrentPageIndex = position; if (fromPage1ToPage2(position)) { if (positionOffset < FIRST_RATE) { /** 第1页，在0->50%区间偏移 */ /** 矩形背景，高度放大40% */ /** * 偏移到50%的时候height需要放大40%，defaultHeight=400，targetHeight=400*1.4=560 * * offset=0 * 400 * (1 + 0.4 * 0 * (1 / 0.5)) = 400 * * offset=0.25 * 400 * (1 + 0.4 * 0.25 * (1 / 0.5)) = 400 * 1.2 = 480 * * offset=0.5 * 400 * (1 + 0.4 * 0.5 * (1 / 0.5)) = 400 * 1.4 = 560 * */ mRectBgCurrentHeight = (int) (mPage1RectBgDefaultHeight * (1 + FIRST_HEIGHT * positionOffset * (1 / FIRST_RATE))); /** 矩形背景，向上移动30dp */ mRectBgCurrentTop = (int) (mPage1RectBgDefaultTop + (FIRST_TOP1 * positionOffset * (1 / FIRST_RATE))); } else { /** 第1页，在50%->100%区间偏移 */ /** 矩形背景，上移30dp后，向下偏移60dp */ mRectBgCurrentTop = (int) (mPage1RectBgDefaultTop + FIRST_TOP1 + (FIRST_TOP2 * (positionOffset - FIRST_RATE) * 1.0 / (1 - FIRST_RATE))); } } else if (fromPage2ToPage3(position)) { /** 矩形背景，宽度缩小15% */ mRectBgCurrentWidth = (int) (mPage2RectBgDefaultWidth * (1 + SECOND_WIDTH * positionOffset)); mRectBgCurrentLeft = getScreenWidth() / 2 - mRectBgCurrentWidth / 2; /** 矩形背景，上移20dp */ mRectBgCurrentTop = (int) (mPage2RectBgDefaultTop + (SECOND_TOP * positionOffset)); } else if (fromPage3ToPage4(position)) { /** 背景矩形的宽度，减少10% */ mRectBgCurrentWidth = mPage3RectBgDefaultWidth * (1 + THIRD_WIDTH * positionOffset); mRectBgCurrentLeft = getScreenWidth() / 2 - mRectBgCurrentWidth / 2; /** 背景矩形的高度，减少10% */ mRectBgCurrentHeight = mPage3RectBgDefaultHeight * (1 + THIRD_HEIGHT * positionOffset); /** 逆时针旋转10度 */ mRectBgCurrentDegree = THIRD_DEGREE * positionOffset; } /** 请求重新绘制 */ postInvalidate(); }</code></pre> <p>最后在onDraw方法中，将计算好宽，高，left，top的view在绘制在canvas上</p> <pre> <code class="language-java">protected void onDraw(Canvas canvas) { super.onDraw(canvas); RectF rect = new RectF(); rect.left = mRectBgCurrentLeft; rect.top = mRectBgCurrentTop; rect.right = rect.left + mRectBgCurrentWidth; rect.bottom = rect.top + mRectBgCurrentHeight; canvas.rotate(mRectBgCurrentDegree, rect.left + mRectBgCurrentWidth / 2, rect.top + mRectBgCurrentHeight / 2); canvas.drawRoundRect(rect, mRectBgDefaultCorner, mRectBgDefaultCorner, mRectBgPaint); }</code></pre> <p>第2步实现了通过ViewPager的偏移offset，动态修改矩形背景的宽，高，left，top，和角度，效果如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/70a16a134dfc6e71c5a38a3af5f7f29b.gif"></p> <p style="text-align:center">第2版.gif</p> <ul> <li>根据offset实现第1页底部背景，裂变图变化</li> </ul> <p>在TransforView的init()初始化方法中，获取并设置图片的默认宽，高，left，top。这里封装了1个ViewModel，里面记录了在canvas上绘制图形需要的bitmap，paint，matrix，width，height，left，top等属性，在调用ViewModel.create()的时候，通过Matrix将Bitmap缩放到合适的宽高，才能通过宽高计算left，top，以便在矩形背景上进行精确的绘制。</p> <pre> <code class="language-java">public ViewModel create() { /** 缩放图片尺寸到合适的比例 */ matrix.postScale(currentWidth / bitmap.getWidth(), currentHeight / bitmap.getHeight()); bitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true); return this; } private void init() { /** 第1页，底部背景图 */ mPage1BottomBg = new ViewModel(getContext(), R.drawable.one_bottom_bg).alpha(255) .width(mPage1RectBgDefaultWidth - padding() * 2) .left(mPage1RectBgDefaultLeft + padding()) // top距离=矩形背景top+height+5dp边距 .top(mPage1RectBgDefaultTop + mPage1RectBgDefaultHeight + padding()) .create(); /** 第2页，裂变背景图 */ for (int i = 0; i < 2; i++) { mPage2Split[i] = new ViewModel(getContext(), R.drawable.two_bg).width(mPage2RectBgDefaultWidth) .height(mPage2RectBgDefaultHeight) .left(mPage2RectBgDefaultLeft) .top(mPage2RectBgDefaultTop) .create(); } /** 第4页，2张裂变背景图 */ for (int i = 0; i < mPage4Split.length; i++) { mPage4Split[i] = new ViewModel(getContext(), R.drawable.four_bg) .width(mPage4RectBgDefaultWidth) .height(mPage4RectBgDefaultHeight) .left(mPage4RectBgDefaultLeft) .top(mPage4RectBgDefaultTop); } }</code></pre> <p>在transfor()中根据偏移offset，修改图片位置，实现移动；第1页的背景图，offset多少则左移多少即可，第2页的裂变图，在第1页滑动到50%时，显示裂变背景图，根据offset分别左右平移，第4页裂变图原理一致，只是绘制前需要通过Matrix将图进行旋转。</p> <pre> <code class="language-java">private void transfor(int position, float positionOffset, int positionOffsetPixels) { if (fromPage1ToPage2(position)) { /** 第1页，底部背景图，根据页面向左偏移 */ mPage1BottomBg.currentLeft = mPage1BottomBg.defaultLeft - positionOffsetPixels; if (positionOffset < FIRST_RATE) { } else { /** 第2页，计算裂变背景图的偏移px，并修改透明度渐变显示 */ float offset = (mPage1RectBgDefaultWidth + dp2px(15)) * ((positionOffset - FIRST_RATE) * (1 / (1 - FIRST_RATE))); mPage2Split[0].currentLeft = mPage2Split[0].defaultLeft - offset; mPage2Split[1].currentLeft = mPage2Split[0].defaultLeft + offset; /** * 偏移到50%的时候alpha需要为0，偏移到100%，alpha需要为255，不过此时positionOffset的取值=0.5~1 * * offset=0.5 * 255 * (0.5 - 0.5) * (1 / (1 - 0.5)))=255 * 0 = 0 * * offset=0.75 * 255 * (0.75 - 0.5) * (1 / (1 - 0.5)))=255 * 0.5 = 127.5 * * offset=1 * 255 * (1 - 0.5) * (1 / (1 - 0.5)))=255 * 1 = 255 */ mPage2Split[0].alpha((int) (255 * (positionOffset - FIRST_RATE) * (1 / (1 - FIRST_RATE)))); mPage2Split[1].alpha((int) (255 * (positionOffset - FIRST_RATE) * (1 / (1 - FIRST_RATE)))); } } else if (fromPage2ToPage3(position)) { if (positionOffset < SECOND_RATE) { } } else if (fromPage3ToPage4(position)) { if (positionOffset < THIRD_RATE) { } else { /** 显示第4页，裂变背景图，并向左右平移 */ float offset = (mPage4RectBgDefaultWidth + dp2px(40)) * ((positionOffset - THIRD_RATE) * (1 / (1 - THIRD_RATE))); for (int i = 0; i < mPage4Split.length; i++) { mPage4Split[i].matrix.reset(); mPage4Split[i].matrix.postScale(mPage4RectBgDefaultWidth / mPage4Split[i].bitmap.getWidth(), mPage4RectBgDefaultHeight / mPage4Split[i].bitmap.getHeight()); float currentLeft = 0; if (i == 0) { // 左移 currentLeft = mPage4RectBgDefaultLeft - offset; } else if (i == 1) { // 右移 currentLeft = mPage4RectBgDefaultLeft + offset; } // 平移 mPage4Split[i].matrix.postTranslate(currentLeft, mPage4RectBgDefaultTop); // 旋转角度 mPage4Split[i].matrix.postRotate(THIRD_DEGREE, currentLeft + mPage4RectBgDefaultWidth/2, mPage4RectBgDefaultTop + mPage4RectBgDefaultHeight/2); mPage4Split[i].alpha((int) (255 * ((positionOffset - THIRD_RATE) * (1 / (1 - THIRD_RATE))))); } } } }</code></pre> <p>效果如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/dcb83d6ac05e88fc95563f295cf6db74.gif"></p> <p style="text-align:center">第3版.gif</p> <ul> <li>根据offset实现页面切换时，每个页面图片元素的隐藏，显示，变形等效果</li> </ul> <p>架子已经搭好，接下来就是实现每个页面的子view在切换时的效果变化，其实原理就是根据offset偏移比例，不断的计算view的宽高，实现缩放；计算left，top，实现移动；计算alpha，实现显示，隐藏。</p> <p>以下是第1页->第2页时主要的代码，其他页面切换效果原理大致一致，只是算法不同，源码上都有详细的注释，感兴趣的朋友可以直接上 <a href="/misc/goto?guid=4959729787727298706" rel="nofollow,noindex">github</a> 下载。</p> <pre> <code class="language-java">/** * 在第1页从0%->50%的过程中，修改透明度，逐渐隐藏第1页的顶部，底部图 * **/ private void stepByHidePage1Views(float positionOffset) { /** * 偏移到50%的时候alpha需要为0，view不可见 * * offset=0 * 255-(255*0.0*(1/0.5)) = 0 * * offset=0.25 * 255-(255*0.25*(1/0.5)) = 127 * * offset=0.5 * 255-(255*0.5*(1/0.5)) = 255 */ mPage1Top.alpha((int) (255 - (255 * positionOffset * (1 / FIRST_RATE)))); mPage1Bottom.alpha((int) (255 - (255 * positionOffset * (1 / FIRST_RATE)))); /** 第1页，顶部图向下移动 */ mPage1Top.currentTop = mPage1Top.defaultTop + (FIRST_TOP2 + FIRST_TOP1) * positionOffset * (1 / FIRST_RATE); /** 第1页，底部图跟随顶部图向下移动 */ mPage1Bottom.currentTop = mPage1Top.currentTop + mPage1Top.defaultHeight + padding(); } /** * 在第1页从50%->100%的过程中，逐渐隐藏第2页的顶部，底部图片， * 并控制中间3张模特图，依据上1张状态实现放大展示 **/ private void stepByShowPage2Views(float positionOffset) { /** 第2页，顶部图，跟随矩形背景下移 */ mPage2Top.currentTop = mRectBgCurrentTop + padding(); /** 第2页，底部图，跟随矩形背景下移 */ mPage2Bottom.currentTop = mPage2Center[0].currentTop + mPage2Center[0].defaultHeight + padding(); /** 第2页，计算裂变背景图的偏移px，并修改透明度渐变显示 */ float offset = (mPage1RectBgDefaultWidth + dp2px(15)) * ((positionOffset - FIRST_RATE) * (1 / (1 - FIRST_RATE))); mPage2Split[0].currentLeft = mPage2Split[0].defaultLeft - offset; mPage2Split[1].currentLeft = mPage2Split[0].defaultLeft + offset; /** * 偏移到50%的时候alpha需要为0，偏移到100%，alpha需要为255，不过此时positionOffset的取值=0.5~1 * * offset=0.5 * 255 * (0.5 - 0.5) * (1 / (1 - 0.5)))=255 * 0 = 0 * * offset=0.75 * 255 * (0.75 - 0.5) * (1 / (1 - 0.5)))=255 * 0.5 = 127.5 * * offset=1 * 255 * (1 - 0.5) * (1 / (1 - 0.5)))=255 * 1 = 255 */ mPage2Split[0].alpha((int) (255 * (positionOffset - FIRST_RATE) * (1 / (1 - FIRST_RATE)))); mPage2Split[1].alpha((int) (255 * (positionOffset - FIRST_RATE) * (1 / (1 - FIRST_RATE)))); /** 第2页，顶部，底部图，透明度渐变显示，偏移量达到100%，完成显示 */ mPage2Top.alpha((int) (255 * (positionOffset - FIRST_RATE) * (1 / (1 - FIRST_RATE)))); mPage2Bottom.alpha((int) (255 * (positionOffset - FIRST_RATE) * (1 / (1 - FIRST_RATE)))); /** 第2页，显示中间3张模特图 */ for (int i = 0; i < mPage2Center.length; i++) { if (i == 0) { /** 第2页，显示第1张模特图 */ mPage2Center[i].currentWidth = mPage2Center[i].defaultWidth * (positionOffset - FIRST_RATE) * 1 / (1 - FIRST_RATE); mPage2Center[i].currentHeight = mPage2Center[i].defaultHeight * (positionOffset - FIRST_RATE) * 1 / (1 - FIRST_RATE); mPage2Center[i].alpha((int) (255 * (positionOffset - FIRST_RATE) * (1 / (1 - FIRST_RATE)))); mPage2Center[i].currentTop = mPage2Top.currentTop + mPage2Top.currentHeight + padding(); } else { /** 第2，3张模特图，在前1张显示到一半时才显示 */ if (mPage2Center[i - 1].currentWidth >= mPage2Center[i - 1].defaultWidth / 2) { float rate = mPage2Center[i - 1].widthRate() - 0.5f; mPage2Center[i].currentWidth = mPage2Center[i].defaultWidth * (rate * 2); mPage2Center[i].currentHeight = mPage2Center[i].defaultHeight * (rate * 2); /** 第2，3张模特图，需要根据第1张图计算left */ mPage2Center[i].currentLeft = mPage2Center[0].currentLeft + mPage2Center[0].currentWidth + padding(); mPage2Center[i].currentTop = mPage2Top.currentTop + mPage2Top.currentHeight + padding(); if (i == 2) { /** 第3张模特图，根据第2张图计算top */ mPage2Center[i].currentTop = mPage2Center[1].currentTop + mPage2Center[1].currentHeight + padding(); } mPage2Center[i].alpha((int) (255 * (positionOffset * rate * 2))); } else { mPage2Center[i].alpha(0); } } } } private void tranfor(int position, float positionOffset, int positionOffsetPixels) { if (positionOffset <= 0) { return; } if (fromPage1ToPage2(position)) { /** 第1页，底部背景图，根据页面向左偏移 */ mPage1BottomBg.currentLeft = mPage1BottomBg.defaultLeft - positionOffsetPixels; if (positionOffset < FIRST_RATE) { /** 快速滑动的时候，可能丢失最后一次绘制，所以需要在这里重新设置一次，保证第2页的view不可见 */ hidePage2Views(); /** 第1页，在0->50%区间偏移 */ /** 矩形背景，高度放大40%，向上移动30dp */ transformRectBgFrom1To2Before(positionOffset); /** 第1页，渐渐隐顶部图，底部图；透明度渐变消失，偏移到50%时完全消失 */ stepByHidePage1Views(positionOffset); } else { /** 快速滑动的时候，可能丢失最后一次绘制，所以需要在这里调重新设置一次。保证第1页的view不可见 */ hidePage1Views(); /** 第1页，在50%->100%区间偏移 */ /** 矩形背景，上移30dp后，向下偏移60dp */ transformRectBgFrom1To2After(positionOffset); /** 第2页，渐渐显示顶部，3张模特图，底部图 */ stepByShowPage2Views(positionOffset); } } else if (fromPage2ToPage3(position)) { /** 矩形背景，宽度缩小15%，上移20dp */ transformRectBgFrom2To3(positionOffset); if (positionOffset < SECOND_RATE) { /** 快速滑动的时候，可能丢失最后一次绘制，所以需要在这里调重新设置一次。保证第3页滑回到第2页时，第3页的view不可见 */ hidePage3Views(); /** 第2页，在0->50%区间偏移，渐渐隐藏顶部，中间，底部，裂变背景图 */ stepByHidePage2Views(positionOffset, positionOffsetPixels); } else { /** 快速滑动的时候，可能丢失最后一次绘制，所以需要在这里调重新设置一次，保证第2页的view不可见 */ hidePage2Views(); /** 第2页，在50->100%区间偏移，渐渐显示第3页，6张模特图 */ stepByShowPage3Views(positionOffset); } } else if (fromPage3ToPage4(position)) { /** 背景矩形的宽度，高度减少10%，逆时针旋转10度 */ transformRectBgFrom3To4(positionOffset); if (positionOffset < THIRD_RATE) { /** 快速滑动的时候，可能丢失最后一次绘制，所以需要在这里调重新设置一次，保证第4页的view不可见 */ hidePage4Views(); /** 渐渐缩放，隐藏第3页，6张模特图 */ stepByHidePage3Views(positionOffset); } else { /** 快速滑动的时候，可能丢失最后一次绘制，所以需要在这里调重新设置一次，保证第3页的view缩放完成 */ scaleHidePage3Views(); /** 渐渐显示第4页，顶部图，底部3张模特图，分裂背景图 */ stepByShowPage4Views(positionOffset); } } postInvalidate(); }</code></pre> <p>目前只仿了80%左右，还有一些细节的效果，以及适配，性能调优还没实现。其实真正的难点在于如何精细化的控制每个view的属性，因为页面中每个图片的位置，大小都是在参照其他view的基础上进行计算后得出的。</p> <p> </p> <p> </p>