美文网首页自定义控件
使用LinearGradient实现文字轮播

使用LinearGradient实现文字轮播

作者: NoBugException | 来源:发表于2019-03-17 17:31 被阅读16次

使用线性渲染(LinearGradient)可以实现文字轮播效果。

其思路是:
(1)获取文字的宽度;
(2)计划每三个字为线性渲染的长度(文字宽度 / 字数 * 3);
(3)重绘时使用矩阵变换的平移操作;

    mMatrix.setTranslate(mTranslate, 0);
    mLinearGradient.setLocalMatrix(mMatrix);

(4)实现轮播

    postInvalidateDelayed(100);

代码如下:

public class GradientTextView extends android.support.v7.widget.AppCompatTextView {

    private LinearGradient mLinearGradient;
    private TextPaint mPaint;
    private Matrix mMatrix;

    //移动总量
    private float mTranslate;
    //每次重绘的偏移量
    private float offset = 20;
    //文字宽度
    private float textWith;
    //线性渲染线段长度
    private int gradientSize;

    public GradientTextView(Context context) {
        this(context, null);
    }

    public GradientTextView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public GradientTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = getPaint();
        mMatrix = new Matrix();

        String text = getText().toString();

        //获取文字的宽度
        textWith = mPaint.measureText(text,0,text.length());

        //设置渐变的宽度,就按照3个字作为一个渐变长度
        gradientSize = (int) (textWith / text.length() * 3);

        mLinearGradient = new LinearGradient(0, 0, gradientSize, 0, new int[]{Color.parseColor("#22ffffff"), Color.parseColor("#ffffffff"), Color.parseColor("#22ffffff")}, null, Shader.TileMode.CLAMP);

        mPaint.setShader(mLinearGradient);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        //将背景设置成黑色
        canvas.drawColor(Color.BLACK);

        //这里有绘制文字的逻辑
        super.onDraw(canvas);

        mTranslate += offset;

        if (mTranslate >= textWith) {
            mTranslate -= offset;
            offset = -offset;
        }

        if(mTranslate <= 0){
            offset = -offset;
            mTranslate += offset;
        }

        //移动渐变
        mMatrix.setTranslate(mTranslate, 0);
        mLinearGradient.setLocalMatrix(mMatrix);

        //每次重绘延迟时间是100毫秒
        postInvalidateDelayed(100);
    }
}

效果如下:

2.gif

相关文章

  • 使用LinearGradient实现文字轮播

    使用线性渲染(LinearGradient)可以实现文字轮播效果。 其思路是:(1)获取文字的宽度;(2)计划每三...

  • 高级UI<第二十篇>:使用LinearGradient实现文字轮

    使用线性渲染(LinearGradient)可以实现文字轮播效果。 其思路是:(1)获取文字的宽度;(2)计划每三...

  • Android 使用 LinearGradient 实现对角线颜

    Android 使用 LinearGradient 实现对角线颜色渐变

  • LinearGradient的用法

    LinearGradient线性渲染一个矩形和一个文字 结合Matrix实现闪动的字 参考文章如下:https:/...

  • 常用三方 SDCycleScrollView轮播图

    iOS图片、文字轮播器Git/SDCycleScrollView 滚动轮播图片、文字、可使用本地图片或加载网络图片...

  • 轮播图实现

    轮播图在实际应用开发使用较多,本文说明一下具体的实现过程。 一、实现轮播图的基本控件介绍。实现轮播图需要将多张图片...

  • 轮播的实现

    轮播的实现 轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) ...

  • Android霓虹灯文字控件

    首先自定义一个控件继承TextView,使用LinearGradient进行渲染 效果: 实现动起来的效果,在on...

  • 原生javascript实现轮播图

    简单的轮播图,但是可以自行修改很多地方比如添加文字描述等等。代码实现了2秒自动轮播,鼠标移入轮播停止,移出轮播继续...

  • 轮播

    轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 轮播的实现原...

网友评论

    本文标题:使用LinearGradient实现文字轮播

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