需求
在开发中，有这样的需求，view在某种操作下会有抽屉的展示，而且里面的文字会有翻滚的效果，如下：
即列表向上滑动时，旁边的气泡会折叠(并未折叠所有)，向下滑动时，气泡会展开，当有新内容时，里面的文字内容会翻滚显示。
实现
所有的效果都是通过Canvans来实现，也是希望借该博客来和大家来分享一下，当开发时视觉需要实现某些动画效果时，第一想到的不是通过Google去搜索别人的实现，然后去套用，而是沉下心来去思考，去分解动画，然后通过Canvas去实现，当你这样做以后，你会发现实际上并非这么难，才能以不变应万变。这样当需求改变时，才能很快的解决。
抽屉效果
-
分解展开动画
�上图可以看出，动画从第一幅图到最后一幅图右边的圆角是不变的，这时候很容易就有思路，假设整个动画的持续时间是500ms，我们只需要在500ms之内匀速�绘制一个半圆角矩形就可以了。
-
代码实现
绘制初始化圆角矩形
private void drawView(Canvas canvas) { mDrawPath.reset(); mDrawPath.addRoundRect(mExpandViewRect, mRadiusRectF, Path.Direction.CW); canvas.drawPath(mDrawPath, mBorderPaint); //绘制背景 mDrawPath.reset(); mDrawPath.addRoundRect(mExpandViewRect, mRadiusRectF, Path.Direction.CW); canvas.drawPath(mDrawPath, mBackPaint); }我们通过Path来绘制半圆角矩形，每个角的角度可以自己设置。如下代码：
public void setRadius(float leftTop, float rightTop, float rightBottom, float leftBottom) { mRadiusRectF[0] = leftTop; mRadiusRectF[1] = leftTop; mRadiusRectF[2] = rightTop; mRadiusRectF[3] = rightTop; mRadiusRectF[4] = rightBottom; mRadiusRectF[5] = rightBottom; mRadiusRectF[6] = leftBottom; mRadiusRectF[7] = leftBottom; }当外界触发展开操作时，设置当前状态为从展开到折叠，然后在onDraw函数里进行绘制，如果设置动画时间为500ms。
private void drawExpand2CollapseView(Canvas canvas) { float ratio = getAnimRatio(); float distance = mExpandOrCollapseDistance * ratio; int left = (int) (mBorderWidth + distance); mExpandViewRect.set(left, mExpandViewRect.top, mExpandViewRect.right, mExpandViewRect.bottom); drawView(canvas); drawCollapseText(canvas); if (ratio == 1) { mCurrentStatus = STATUS_COLLAPSE; } else { invalidate(); } } private float getAnimRatio() { long now = System.currentTimeMillis(); float ratio = (now - mStartTime) / mDrawerAnimDuration; return ratio >= 1 ? 1 : ratio; }其中mStartTime是触发展开操作的起始时间，通过当前时间和起始时间的差值再来除以动画持续的时间，得到当前的比例，再把比例乘以需要伸缩的那部分距离，就得到当前绘制的长度，如果比例为1，则证明时间用完，动画结束。大体的思路是这个样子。
文字在这个过程中怎么处理，完全随着自己业务需要而修改，比方说字体平移，字体变大都可以，只需要拿到这个比例算出值，然后通过canvas来绘制即可，非常方便
翻转效果
android里面的翻转效果很多童鞋会想到用TextSwitcher来实现，但是在这种场景下是做不了的，因为首先这个view是一个圆角矩形，如果把他作为TextSwitcher的子view来进行翻转，会发现有圆角哪一侧有很显然的漏洞，�如下如所示：
所以还是得用Canvas来实现这个动效，视觉要求，当有新内容来时，里面的文字垂直滚动即可。
-
分解滚动动画
当下一个文字来时，上一个文字向上平移并且透明度变小，新来的文字慢慢平移到中间，并且透明度变大。知道了这么多，代码写起来就得心应手了。下面截下关键代码：
-
实现
private void drawNextTextView(Canvas canvas) { drawExpandBack(canvas); float ratio = getNextTextRatio(); String text; Rect bounds; Paint.FontMetricsInt fontMetrics = null; int baseline; float start; if (ratio != 1) { bounds = new Rect(); mTextPaint.getTextBounds(mCurrentText, 0, mCurrentText.length(), bounds); start = mExpandViewRect.left + mLeftTopRectRadius * 0.8f + (mExpandViewRect.width() - mLeftTopRectRadius - bounds.width()) / 2; fontMetrics = mTextPaint.getFontMetricsInt(); baseline = (int) ((mHeight * (1 - ratio) - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top); mTextPaint.setAlpha((int) (255 * (1 - ratio))); canvas.drawText(mCurrentText, start, baseline, mTextPaint); bounds = new Rect(); mTextPaint.getTextBounds(mNextText, 0, mNextText.length(), bounds); start = mExpandViewRect.left + mLeftTopRectRadius * 0.8f + (mExpandViewRect.width() - mLeftTopRectRadius - bounds.width()) / 2; baseline = (int) (((mHeight - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top) + mHeight / 2 * (1 - ratio)); mTextPaint.setAlpha((int) (255 * ratio)); canvas.drawText(mNextText, start, baseline, mTextPaint); postInvalidateDelayed(50); } else { mTextPaint.setAlpha(255); bounds = new Rect(); mTextPaint.getTextBounds(mNextText, 0, mNextText.length(), bounds); fontMetrics = mTextPaint.getFontMetricsInt(); start = mExpandViewRect.left + mLeftTopRectRadius * 0.8f + (mExpandViewRect.width() - mLeftTopRectRadius - bounds.width()) / 2; baseline = ((mHeight - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top); canvas.drawText(mNextText, start, baseline, mTextPaint); String text1 = mNextText; mNextText = mCurrentText; mCurrentText = text1; } }基本思路也是设置一个动画时间，算出当前变化的比例，通过Canvas来不停的绘制文字达到滚动的效果。如果说需要有更立体的效果，比方说翻滚的过程中字体大小也需要改变，按照这样的思路，设置paint的textsize�即可。
好，今天的分享就到这里。这里贴出这个效果的 Github Demo地址。�里面还有其他动画哟，多多支持，点个赞哈。
网友评论