Android闪闪发光字体效果

Posted 2020-09-18 jhcelue

Facebook开源了一款载入效果工具Shimmer，能够实现字体的闪闪发光效果，效果例如以下

链接地址在这里https://github.com/facebook/Shimmer，只是是针对ios开发实现的。看了下没看懂（还没搞过object-c，囧ZR），所以随手搜了Shimmer android，竟然真有人做了，在这里https://github.com/RomainPiel/Shimmer-android，以下是效果图

实现的核心部分是使用线性渐变LinearGradient，然后画图的时候不断将渐变平移来达到闪动的效果，平移量的控制使用了属性动画。想了一下这部分也能够自己来控制，以下就来做个简单改造：

public class MyTextView extends TextView {

	private LinearGradient mLinearGradient;
	private Matrix mGradientMatrix;
	private Paint mPaint;
	private int mViewWidth = 0;
	private int mTranslate = 0;

	private boolean mAnimating = true;

	public MyTextView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		if (mViewWidth == 0) {
			mViewWidth = getMeasuredWidth();
			if (mViewWidth > 0) {
				mPaint = getPaint();
				mLinearGradient = new LinearGradient(-mViewWidth, 0, 0, 0,
						new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },
						new float[] { 0, 0.5f, 1 }, Shader.TileMode.CLAMP);
				mPaint.setShader(mLinearGradient);
				mGradientMatrix = new Matrix();
			}
		}
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		if (mAnimating && mGradientMatrix != null) {
			mTranslate += mViewWidth / 10;
			if (mTranslate > 2 * mViewWidth) {
				mTranslate = -mViewWidth;
			}
			mGradientMatrix.setTranslate(mTranslate, 0);
			mLinearGradient.setLocalMatrix(mGradientMatrix);
			postInvalidateDelayed(50);
		}
	}

}

继承一个TextView，由于渐变的平移须要view的宽度，所以在onSizeChanged里将各个须要的元素初始化。在linearGradient里定义了渐变的颜色和颜色的变化位置，然后设置给画图使用的paint。

onDraw()方法里控制偏移量的计算，这里每次移动宽度的1/10，postInvalidateDelay()里设置每一帧绘制的时间，也就是控制闪动的快慢。效果例如以下

评论里建议的从中间到两边的效果

从中间到两边须要对称的变换，这里是将中间的光斑逐渐扩大覆盖到整个文字。还是使用LinearGradient。仅仅是动作从平移变成了缩放。一開始想到的是两个光斑从中间開始分别左右移动。但由于绘制的时候使用一个paint。在paint里设置对应的shader，用这样的思路实现两边对称的变换，试了一下没有达到好的效果。临时还没想到更好的办法。欢迎给出各种建议。

以下改动的代码

public class MyTextView extends TextView {

	private LinearGradient mLinearGradient;
	private Matrix mGradientMatrix;
	private Paint mPaint;
	private int mViewWidth = 0;
	private float mScale = 0.1f;

	private boolean mAnimating = true;

	public MyTextView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
		super.onSizeChanged(w, h, oldw, oldh);
		if (mViewWidth == 0) {
			mViewWidth = getMeasuredWidth();
			if (mViewWidth > 0) {
				mPaint = getPaint();
				mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0,
						new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },
						new float[] { 0.0f, 0.5f, 1.0f }, Shader.TileMode.CLAMP);
				mPaint.setShader(mLinearGradient);
				mGradientMatrix = new Matrix();
			}
		}
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		if (mAnimating && mGradientMatrix != null) {
			mScale += 0.1f;
			if (mScale > 1.2f) {
				mScale = 0.1f;
			}
			mGradientMatrix.setScale(mScale, mScale, mViewWidth / 2, 0);
			mLinearGradient.setLocalMatrix(mGradientMatrix);
			postInvalidateDelayed(100);
		}
	}

}

演示样例下载：http://download.csdn.net/detail/xu_fu/7254849

2015.03.10 更新：

Facebook在Android上也实现了Shimmer效果。能够针对全部的View。地址：http://facebook.github.io/shimmer-android/