逐行显示的TextView-白红宇

前言

最近由于公司的需要，需要做一个文字逐行显示的效果，通过查找网上资料，结合自己的想法，基本实现。国际惯例，先上效果图：

大体思路

在做这个效果之前其实也去网上找了资料，发现有些要么是根据有多少行就整多少个TextView，然后通过动画实现逐行显示，还有一种就是通过ListView来实现。这两种前一种太low，后者也比较复杂。本文实现的思路是：获取到TextView的高度，在TextView的上面画一个颜色遮罩，具体颜色有View所处背景来决定，然后通过不断改变遮罩的高度，以及当前行的遮罩的透明度，实现逐渐浮现。

关键代码解析

protected void onDraw(Canvas canvas) {
	if (!mIsRunning) return;
	super.onDraw(canvas);
	canvas.drawRect(mMaskRect, mMaskPaint);
	for (int i = mCurrentLine; i < mLineCount; i++) {
	if (i == mCurrentLine) {
	mLinePaint.setColor(getAlphaColor());
	}
	canvas.drawRect(new Rect(0, i * mLineHeight, getWidth(), (i + 1) * mLineHeight), mLinePaint);
	}
	mMaskRect.top = mLineHeight * (mCurrentLine + 1);

	}

注意这里if (!mIsRunning) return;为了防止文本闪现，因为要使得遮罩盖住文本，所以canvas.drawRect(mMaskRect, mMaskPaint);要防止super.onDraw()后面，这样的话就会在遮罩还没有画出了之前，先画文本，造成全部文本先出来然后遮罩闪现的诡异效果所以mIsRunning在动画开始之后才为true，这个时候才开始画文本。

private @ColorInt
	int getAlphaColor() {
	int alpha = 255 - (int) ((System.nanoTime() - mCurrentTime) / 1000000f / LINE_ANIMATOR_DURATION * 255);
	Log.e("getAlphaColor", alpha + "");
	return ColorUtils.setAlphaComponent(mMaskColor, alpha < 0 ? 0 : alpha);
	}

这个方法的作用是在显示当前行通过改变遮罩颜色的透明度，实现逐渐出现的效果，通过每一行的动画时间决定透明度，如果超过动画时间就全透明。注意这里，

mLineValueAnimator.setInterpolator(new LinearInterpolator());

默认的差值器为先加速后减速，会造成中间文本显示跳动的诡异效果，所以这里用LinearInterpolator。

后记

，喜欢个给个星吧！