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中，通过矩阵不断的平移渐变效果，就可以实现文本闪烁效果了。