Android闪闪发光字体效果

http://blog.csdn.net/xu_fu/article/details/24484019

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

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

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

[java] view plaincopyprint?

1. public class MyTextView extends TextView {  
2.   
3.     private LinearGradient mLinearGradient;  
4.     private Matrix mGradientMatrix;  
5.     private Paint mPaint;  
6.     private int mViewWidth = 0;  
7.     private int mTranslate = 0;  
8.   
9.     private boolean mAnimating = true;  
10.   
11.     public MyTextView(Context context, AttributeSet attrs) {  
12.         super(context, attrs);  
13.     }  
14.   
15.     @Override  
16.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
17.         super.onSizeChanged(w, h, oldw, oldh);  
18.         if (mViewWidth == 0) {  
19.             mViewWidth = getMeasuredWidth();  
20.             if (mViewWidth > 0) {  
21.                 mPaint = getPaint();  
22.                 mLinearGradient = new LinearGradient(-mViewWidth, 0, 0, 0,  
23.                         new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },  
24.                         new float[] { 0, 0.5f, 1 }, Shader.TileMode.CLAMP);  
25.                 mPaint.setShader(mLinearGradient);  
26.                 mGradientMatrix = new Matrix();  
27.             }  
28.         }  
29.     }  
30.   
31.     @Override  
32.     protected void onDraw(Canvas canvas) {  
33.         super.onDraw(canvas);  
34.         if (mAnimating && mGradientMatrix != null) {  
35.             mTranslate += mViewWidth / 10;  
36.             if (mTranslate > 2 * mViewWidth) {  
37.                 mTranslate = -mViewWidth;  
38.             }  
39.             mGradientMatrix.setTranslate(mTranslate, 0);  
40.             mLinearGradient.setLocalMatrix(mGradientMatrix);  
41.             postInvalidateDelayed(50);  
42.         }  
43.     }  
44.   
45. }  

继承一个TextView，因为渐变的平移需要view的宽度，所以在onSizeChanged里将各个需要的元素初始化，在linearGradient里定义了渐变的颜色和颜色的变化位置，然后设置给绘图使用的paint。onDraw()方法里控制偏移量的计算，这里每次移动宽度的1/10，postInvalidateDelay()里设置每一帧绘制的时间，也就是控制闪动的快慢。效果如下

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

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

[java] view plaincopyprint?

1. public class MyTextView extends TextView {  
2.   
3.     private LinearGradient mLinearGradient;  
4.     private Matrix mGradientMatrix;  
5.     private Paint mPaint;  
6.     private int mViewWidth = 0;  
7.     private float mScale = 0.1f;  
8.   
9.     private boolean mAnimating = true;  
10.   
11.     public MyTextView(Context context, AttributeSet attrs) {  
12.         super(context, attrs);  
13.     }  
14.   
15.     @Override  
16.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
17.         super.onSizeChanged(w, h, oldw, oldh);  
18.         if (mViewWidth == 0) {  
19.             mViewWidth = getMeasuredWidth();  
20.             if (mViewWidth > 0) {  
21.                 mPaint = getPaint();  
22.                 mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0,  
23.                         new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },  
24.                         new float[] { 0.0f, 0.5f, 1.0f }, Shader.TileMode.CLAMP);  
25.                 mPaint.setShader(mLinearGradient);  
26.                 mGradientMatrix = new Matrix();  
27.             }  
28.         }  
29.     }  
30.   
31.     @Override  
32.     protected void onDraw(Canvas canvas) {  
33.         super.onDraw(canvas);  
34.         if (mAnimating && mGradientMatrix != null) {  
35.             mScale += 0.1f;  
36.             if (mScale > 1.2f) {  
37.                 mScale = 0.1f;  
38.             }  
39.             mGradientMatrix.setScale(mScale, mScale, mViewWidth / 2, 0);  
40.             mLinearGradient.setLocalMatrix(mGradientMatrix);  
41.             postInvalidateDelayed(100);  
42.         }  
43.     }  
44.   
45. }  

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

2015.03.10 更新：

Facebook在Android上也实现了Shimmer效果，可以针对所有的View，地址：http://facebook.github.io/shimmer-android/

版权声明：本文为博主原创文章，未经博主允许不得转载。

• 上一篇Android墨迹3.0特性介绍效果实现——做一个垂直滚动的Layout