前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >仿今天头条加载环境文字闪动效果

仿今天头条加载环境文字闪动效果

作者头像
xiangzhihong
发布2018-02-01 16:36:41
1.2K0
发布2018-02-01 16:36:41
举报
文章被收录于专栏:向治洪向治洪

实现原理:

这里写图片描述
这里写图片描述
对Paint设置Shade,此处用的是LinearGradient,线性渐变,构造方法指定渐变的起始坐标和终止坐标,渐变的颜色,渐变的模式,然后在绘制的时候对偏移量进行递增并设置越界返回初始点,将这个偏移量设置到Matrix矩阵对象内,然后线性渐变设置Martix,此时绘制的渐变就进行了偏移产生了闪动的效果,然后在延迟绘制,如此就进行了往复的绘制偏移,即闪动效果.
参数:
这里写图片描述
这里写图片描述
LInearGradient前几个参数都好理解,这里解释一下第三个参数,大家可以试一下看一下效果,进入头像的
代码语言:javascript
复制
Shader.TileMode.CLAMP   重复最后一个颜色至最后  
Shader.TileMode.MIRROR  重复着色的图像水平或垂直方向已镜像方式填充会有翻转效果  
Shader.TileMode.REPEAT  重复着色的图像水平或垂直方向  

要实现今日头条的效果我们只需要在onSizeChanged初始化以下方法

代码语言:javascript
复制
  private void init() {
        Paint mPaint = getPaint();
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setTextSize(40);
        gradient = new LinearGradient(0, 0, getMeasuredWidth(), 0, Color.GRAY, Color.RED, Shader.TileMode.REPEAT);
        mPaint.setShader(gradient);
        matrix = new Matrix();
    }

并且ondraw中重新绘制文字

代码语言:javascript
复制
 if (matrix != null) {
            mTranslate += getMeasuredWidth() / 10;
            if (mTranslate > getMeasuredWidth() * 2) {
                mTranslate = -getMeasuredWidth();
            }
            matrix.setTranslate(mTranslate, 0);
            gradient.setLocalMatrix(matrix);
            postInvalidateDelayed(300);
        }

下面是源码链接:https://github.com/xiangzhihong/ShadeView/tree/master

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-06-02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 实现原理:
    • 对Paint设置Shade,此处用的是LinearGradient,线性渐变,构造方法指定渐变的起始坐标和终止坐标,渐变的颜色,渐变的模式,然后在绘制的时候对偏移量进行递增并设置越界返回初始点,将这个偏移量设置到Matrix矩阵对象内,然后线性渐变设置Martix,此时绘制的渐变就进行了偏移产生了闪动的效果,然后在延迟绘制,如此就进行了往复的绘制偏移,即闪动效果.
      • 参数:
        • LInearGradient前几个参数都好理解,这里解释一下第三个参数,大家可以试一下看一下效果,进入头像的
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档