Android文本閃爍

簡介

有時我們會在廣告LED中看到文本閃爍的效果，那它到底是怎么實現的呢？

效果圖：

 

設計思路

我們都知道Android中的LinearGradient可以實現顏色漸變的效果，那么我們可以通過平移漸變效果來實現文本閃爍效果。

代碼

package com.example.ViewDemo;

import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * 繼承TextView,實現文字閃爍
 */
public class GradientTextView extends TextView {
    /**
     * 畫筆
     */
    private Paint mPaint;
    /**
     * 寬度
     */
    private int mViewWidth;
    /**
     * 線性漸變對象
     */
    private LinearGradient mLinearGradient;
    /**
     * 矩陣對象
     */
    private Matrix mGradientMatrix;
    /**
     * 平移距離
     */
    private int mTranslate;

    public GradientTextView(Context context) {
        super(context);
    }

    public GradientTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public GradientTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    /**
     * 測量出文本寬度后,再初始化畫筆等基礎設置
     * @param w
     * @param h
     * @param oldw
     * @param oldh
     */
    @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[]{Color.BLUE,0xffffff,Color.BLUE},
                        null ,
                        Shader.TileMode.CLAMP);
                mPaint.setShader(mLinearGradient);
                mGradientMatrix = new Matrix();
            }
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //繪制文字之前
        super.onDraw(canvas);
        //繪制文字之后
        if (mGradientMatrix != null){
            mTranslate += mViewWidth/5;
            if (mTranslate > 2 * mViewWidth){//決定文字閃爍的頻繁:快慢
                mTranslate =  -mViewWidth;
            }
            mGradientMatrix.setTranslate(mTranslate,0);
            mLinearGradient.setLocalMatrix(mGradientMatrix);
            postInvalidateDelayed(100);
        }
    }
}

分析

想要達到這樣的效果，是利用Paint中的渲染器Shader，為它設置一個渲染效果，如顏色漸變LinearGradient，然后使用該畫筆來繪制文本。最后，通過矩陣平移漸變效果，從而實現閃爍效果。

首先，在onSizeChanged中進行初始化工作。關鍵的是在確定了控件的寬度后，獲取TextView的畫筆getPaint，然后設置渲染效果和初始化矩陣Matrix。最后在onDraw中，通過矩陣不斷的平移漸變效果，就可以實現文本閃爍效果了。