Android发光字体效果

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

Android发光字体效果_第1张图片

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

Android发光字体效果_第2张图片

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

[java] view plain copy print ?
  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, 000,  
  23.                         new int[] { 0x33ffffff0xffffffff0x33ffffff },  
  24.                         new float[] { 00.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()里设置每一帧绘制的时间,也就是控制闪动的快慢。效果如下

Android发光字体效果_第3张图片

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


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

[java] view plain copy print ?
  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(00, mViewWidth, 0,  
  23.                         new int[] { 0x33ffffff0xffffffff0x33ffffff },  
  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 / 20);  
  40.             mLinearGradient.setLocalMatrix(mGradientMatrix);  
  41.             postInvalidateDelayed(100);  
  42.         }  
  43.     }  
  44.   

你可能感兴趣的:(Android发光字体效果)