Android閃閃發光字體效果

原創

2020-02-21 10:55

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