美文网首页
Android闪闪发光字体效果

Android闪闪发光字体效果

作者: 因为我的心 | 来源:发表于2021-07-07 10:14 被阅读0次

一、前言:

Facebook开源了一款加载效果工具Shimmer,可以实现字体的闪闪发光效果,效果如下

1.gif

链接地址在这里https://github.com/facebook/Shimmer,不过是针对iOS开发实现的,看了下没看懂(还没搞过object-c,囧ZR),所以随手搜了Shimmer android,居然真有人做了,在这里https://github.com/RomainPiel/Shimmer-android,下面是效果图

2.gif

二、代码实现:

实现的核心部分是使用线性渐变LinearGradient,然后绘图的时候不断将渐变平移来达到闪动的效果,平移量的控制使用了属性动画,想了一下这部分也可以自己来控制,下面就来做个简单改造:

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);
        }
    }
 
}

继承一个TextView,因为渐变的平移需要view的宽度,所以在onSizeChanged里将各个需要的元素初始化,在linearGradient里定义了渐变的颜色和颜色的变化位置,然后设置给绘图使用的paint。onDraw()方法里控制偏移量的计算,这里每次移动宽度的1/10,postInvalidateDelay()里设置每一帧绘制的时间,也就是控制闪动的快慢。效果如下


3.gif

评论里建议的从中间到两边的效果

4.gif

从中间到两边需要对称的变换,这里是将中间的光斑逐渐扩大覆盖到整个文字,还是使用LinearGradient,只是动作从平移变成了缩放。一开始想到的是两个光斑从中间开始分别左右移动,但因为绘制的时候使用一个paint,在paint里设置相应的shader,用这种思路实现两边对称的变换,试了一下没有达到好的效果,暂时还没想到更好的办法,欢迎给出各种建议。下面修改的代码

public class MyTextView extends TextView {
 
    private LinearGradient mLinearGradient;
    private Matrix mGradientMatrix;
    private Paint mPaint;
    private int mViewWidth = 0;
    private float mScale = 0.1f;
 
    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(0, 0, mViewWidth, 0,
                        new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff },
                        new float[] { 0.0f, 0.5f, 1.0f }, Shader.TileMode.CLAMP);
                mPaint.setShader(mLinearGradient);
                mGradientMatrix = new Matrix();
            }
        }
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mAnimating && mGradientMatrix != null) {
            mScale += 0.1f;
            if (mScale > 1.2f) {
                mScale = 0.1f;
            }
            mGradientMatrix.setScale(mScale, mScale, mViewWidth / 2, 0);
            mLinearGradient.setLocalMatrix(mGradientMatrix);
            postInvalidateDelayed(100);
        }
    }
 
}

相关文章

  • Android闪闪发光字体效果

    一、前言: Facebook开源了一款加载效果工具Shimmer,可以实现字体的闪闪发光效果,效果如下 链接地址在...

  • 著名的三方框架

    Shimmer 闪闪发光的字体效果库 FastImageCache iOS库,用于在滚动时快速显示图像 FLAn...

  • Photoshop︱创建一个钻石文本效果

    用某些字体可以更轻松的实现一些文本效果。今天的教程教大家使用Fortuna Dot字体来创建一个简单,闪闪发光的钻...

  • IOS - Shimmer

    Shimmer是一款开源的加载效果工具,能够非常简单地向应用中的任何视图添加闪闪发光的字体效果,并且不会显得突兀。...

  • Android 简单换肤效果的实现

    android 换肤无非就是改变字体的颜色,控件的背景等显示效果。 下面看看SkinActivity的实现: 先上...

  • SpannableStringUtil实现丰富文字效果

    前言 在android开发中,我们不免会用到 TextView 的各种显示效果,如字体样式,颜色,大小,背景等。今...

  • 简书Markdown格式梳理

    标题 效果: 标题 加粗 效果:加粗字体 斜体 效果: 斜体文字 字体背景 效果:汽车 飞机 列表 效果: 列表1...

  • 字体涂鸦效果Photoshop样式

    街头涂鸦字体效果ps样式下载-字体涂鸦效果Photoshop样式- Mac下载今天小编为您带来的是字体涂鸦效果Ph...

  • android更换字体

    android更换字体 最近在研究android端字体替换需求,发现还是有很多方式来替换字体。 一,前言 Andr...

  • 英文创意字体设计

    INSANITY滴落效果创意字体设计创意字体设计INSANITY滴落字体设计

网友评论

      本文标题:Android闪闪发光字体效果

      本文链接:https://www.haomeiwen.com/subject/mlloultx.html