android 使用LinearGradient进行字体渐变的效果

自定义View

本文转载自android 使用LinearGradient进行字体渐变的效果(cnblogs)

有这么一种效果，一串字符有一束白光从字体上面闪光的效果。如下图显示：

就像上面的显示效果一样一束白光闪过，这种效果主要还是使用了LinearGradient类来进行的LinearGradient也称作线性渲染，LinearGradient的作用是实现某一区域内颜色的线性渐变效果,它有两个构造函数:

public LinearGradient(
    float x0, float y0, 
    float x1, float y1, 
    int color0, int color1, 
    Shader.TileMode tile)

• 参数x0表示渐变的起始点x坐标；
• 参数y0表示渐变的起始点y坐标；
• 参数x1表示渐变的终点x坐标；
• 参数y1表示渐变的终点y坐标；
• color0表示渐变开始颜色；
• color1表示渐变结束颜色；
• 参数tile表示平铺方式。
  

  Shader.TileMode有3种参数可供选择，分别为CLAMP、REPEAT和MIRROR：
  
  CLAMP的作用是如果渲染器超出原始边界范围，则会复制边缘颜色对超出范围的区域进行着色
  REPEAT的作用是在横向和纵向上以平铺的形式重复渲染位图
  MIRROR的作用是在横向和纵向上以镜像的方式重复渲染位图

 public LinearGradient (
        float x0, float y0, 
        float x1, float y1, 
        int[] colors, 
        float[] positions, 
        Shader.TileMode tile);

• 参数x0表示渐变的起始点x坐标；
• 参数y0表示渐变的起始点y坐标；
• 参数x1表示渐变的终点x坐标；
• 参数y1表示渐变的终点y坐标；
• 参数colors表示渐变的颜色数组；
• 参数positions用来指定颜色数组的相对位置；
• 参数tile表示平铺方式。
• 通常，参数positions设为null，表示颜色数组以斜坡线的形式均匀分布。

下面这段代码是直接从git上面的项目拷贝下来的

package com.example.shimmer;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.widget.TextView;
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);
        }
    }
}

这段代码主要是分两步：一个是在onSizeChanged()即大小发生改变的时候，另外一个是onDraw()主要是用来做动画的效果的，首先我们先来看onSizeChanged()里面的代码，在这段代码中主要是定义了LinearGradient:

mLinearGradient = new LinearGradient(
    -mViewWidth, 0,
    0, 0, 
    new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },
    new float[] { 0, 0.5f, 1 }, 
    Shader.TileMode.CLAMP);

这段代码可以这么理解，它定义了一组渐变的数值是{ 0x33ffffff, 0xffffffff, 0x33ffffff}，这组数值分别在相对应的０，0.5，1中显示，０位置对应0x33ffffff颜色，0.5位置对应0xffffffff，１位置对应0x33ffffff，这个渐变的初始位置是在手机屏幕的外面x=(-mViewWidth，０)就是屏幕外面.
最后来看一下这个onDraw()方法里面是如何做动画的
mTranslate += mViewWidth / 10;很简单表示每一次运动的递增值

if (mTranslate > 2 * mViewWidth) {
    mTranslate = -mViewWidth;
}

这个就是运动结束点，我们把上面画一个如下图

我就把LinearGradient这个比作一个长方形，如上图是初始化的位置在手机屏幕的最左边，要运动到屏幕的最右边就需要２*width的长度。

剩下的方法就是很好理解了，这里不再说明了