android 使用LinearGradient進行字體漸變的效果

有這么一種效果，一串字符有一束白光從字體上面閃光的效果。如下圖顯示：

 

就像上面的顯示效果一樣一束白光閃過，這種效果主要還是使用了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顏色，０．5位置對應0xffffffff，１位置對應0x33ffffff，這個漸變的初始位置是在手機屏幕的外面x=(-mViewWidth，０)就是屏幕外面

最后來看一下這個onDraw()方法里面是如何做動畫的

mTranslate += mViewWidth / 10;很簡單表示每一次運動的遞增值

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

這個就是運動結束點，我們把上面話一個如下圖

我就把LinearGradient這個比作一個長方形，如上圖是初始化的位置在手機屏幕的最左邊，要運動到屏幕的最右邊就需要２*width的長度。

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