Android 闪光字体

本文介绍了一种在Android中实现闪烁效果的方法,通过自定义TextView并使用Shader(渲染效果)实现文字的闪光效果。文中详细解释了LinearGradient和RadialGradient的使用,并提供了完整的自定义控件代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考文章地址:https://www.jianshu.com/p/a9d09cb7577f

                    http://blog.youkuaiyun.com/zhangphil/article/details/52004027

安卓闪光字体主要是获取到控件的画笔Paint,然后给Paint添加Shader(渲染效果),将渲染效果平行移动产生闪闪发光的感觉,本文是针对TextView进行重写,按原理,ImageView应该也可以产生相同的效果

先看自定义控件的代码,非常简单

@SuppressLint("AppCompatCustomView")
public class TwinkleTextView extends TextView{

    // 线性渐变渲染
    private LinearGradient mLinearGradient;
    //环形渐变渲染
    private RadialGradient mRadialGradient;
    // 渲染矩阵
    private Matrix mGradientMatrix;
    // 画笔
    private Paint mPaint;
    private int mViewWidth = 0;
    private int mViewHeight = 0;

    private int mTranslateX = 0;

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

    public TwinkleTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public TwinkleTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public TwinkleTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (mViewWidth == 0 || mViewHeight==0) {
            mViewWidth = getMeasuredWidth();
            mViewHeight=getMeasuredHeight();
            if (mViewWidth > 0 ||  mViewHeight>0 ) {
                mPaint = getPaint();
                // 创建RadialGradient对象
                // 第一个,第二个参数表示渐变圆中心坐标
                // 第三个参数表示半径
                // 第四个,第五个,第六个与线性渲染相同
                mRadialGradient = new RadialGradient(50, 50,30, new int[] {
                        0x11FEB726, 0xffFEB726, 0x33FEB726 }, new float[] { 0f,
                        0.5f, 1f}, Shader.TileMode.CLAMP);

                // 创建LinearGradient对象
                // 起始点坐标(-mViewWidth, 0) 终点坐标(0,0)
                // 第一个,第二个参数表示渐变起点 可以设置起点终点在对角等任意位置
                // 第三个,第四个参数表示渐变终点
                // 第五个参数表示渐变颜色
                // 第六个参数可以为空,表示坐标,值为0-1
                // 如果这是空的,颜色均匀分布,沿梯度线。
                // 第七个表示平铺方式
                // CLAMP重复最后一个颜色至最后
                // MIRROR重复着色的图像水平或垂直方向已镜像方式填充会有翻转效果
                // REPEAT重复着色的图像水平或垂直方向
                mLinearGradient = new LinearGradient(-mViewWidth/3, 0, 0, mViewHeight,
                        new int[] { 0xff000000, 0xffC0C0C0 , 0xff000000 },
                        new float[] { 0, 0.5f, 1f }, Shader.TileMode.CLAMP);
                mPaint.setShader(mLinearGradient);
                mPaint.setColor(Color.parseColor("#ff000000"));
                //设置字体阴影效果
                //第一个参数代表阴影的半径
                //第二个参数代表阴影在X方向的延伸像素
                //第三个参数代表阴影在Y方向的延伸像素

                mPaint.setShadowLayer(3, 2, 2, 0xFFFF00FF);
                mGradientMatrix = new Matrix();
            }
        }
    }



    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if ( mGradientMatrix != null) {
            mTranslateX += mViewWidth / 10;
            if (mTranslateX > 2 * mViewWidth ) {
                mTranslateX = -mViewWidth;
            }
            mGradientMatrix.setTranslate(mTranslateX, 0);

            // mLinearGradient.setLocalMatrix(mGradientMatrix);
            mLinearGradient.setLocalMatrix(mGradientMatrix);
            postInvalidateDelayed(100);
        }
    }

}

LinearGradient的构造方法参数较多,下面我们看下都有什么用呢

  • xStart:  x方向的起点坐标,x,y的起点和终点坐标确定了渐变色的2个属性,1.渐变色平铺时的角度,2.渐变色的宽度;高度不用设置时因为根据宽度和模式,角度铺满控件的
  • yStart:Y方向的起点坐标
  • xEnd:    X方向的终点坐标
  • yEnd:    Y方向的终点坐标
  • int[]:       渐变色数组,三个颜色分别为开始的颜色,中间的颜色,和后面的颜色如 new int[] { 0xff000000, 0xffC0C0C0 , 0xff000001 }
  • float[]:    分别指上面三个颜色的位置,如  new float[] { 0, 0.5f, 1f },其中0.5f是指0xffC0C0C0在上面X Y所组成的坐标点的正中间,其他颜色是向两边渐变的,同理1f是指后面的颜色0xff000001在最边缘,其他颜色向中间的颜色渐变(也就是说出国最边缘1f的地方是0xff000001颜色,它左手边的全是渐变色),
  • ShaderModle:    渐变平铺的模式,共有三种 

        -CLAMP           边缘拉伸,如果控件不能被填满,会用后面的颜色覆盖(如0xff000001
        -REPEAT         在水平和垂直两个方向上重复,相邻图像没有间隙

 

        -MIRROR         以镜像的方式在水平和垂直两个方向上重复,相邻图像有间隙

 

下来我们用图像更形象的看下 坐标 不同带来的角度问题和 三色位置 的影响

我们再看看三种覆盖模式所带来的着色效果

看了上面图片后,想要什么样的效果,自己应该可以随意搭配了,配好想要的效果后,给画笔添加着色器效果,然后就可以在onDraw()方法里面用Matrix对着色的效果进行平移来达到闪光的效果;

最后贴上布局文件的代码,只要引入该布局就可以看到闪闪发光的字体了,是不是很简单

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.test.caiwen.customview.TwinkleTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Hello World"
        android:textSize="35sp"
        android:textStyle="bold"
        android:background="#ff000000"/>
</LinearLayout>

上述问题如有错误请指正,有更好的想法大家交流分享下

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

baoolong

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值