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

简介: 实现原理: 对Paint设置Shade,此处用的是LinearGradient,线性渐变,构造方法指定渐变的起始坐标和终止坐标,渐变的颜色,渐变的模式,然后在绘制的时候对偏移量进行递增并设置越界返回初始点,将这个偏移量设置到Matrix矩阵对象内,然后线性渐变设置Martix,此时绘制的渐变就进行了偏移产生了闪动的效果,然后在延迟绘制,如此就进行了往复的绘制偏移,即闪动效果.

实现原理:

这里写图片描述

对Paint设置Shade,此处用的是LinearGradient,线性渐变,构造方法指定渐变的起始坐标和终止坐标,渐变的颜色,渐变的模式,然后在绘制的时候对偏移量进行递增并设置越界返回初始点,将这个偏移量设置到Matrix矩阵对象内,然后线性渐变设置Martix,此时绘制的渐变就进行了偏移产生了闪动的效果,然后在延迟绘制,如此就进行了往复的绘制偏移,即闪动效果.

参数:

这里写图片描述

LInearGradient前几个参数都好理解,这里解释一下第三个参数,大家可以试一下看一下效果,进入头像的

Shader.TileMode.CLAMP   重复最后一个颜色至最后  
Shader.TileMode.MIRROR  重复着色的图像水平或垂直方向已镜像方式填充会有翻转效果  
Shader.TileMode.REPEAT  重复着色的图像水平或垂直方向  
要实现今日头条的效果我们只需要在onSizeChanged初始化以下方法

  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中重新绘制文字

 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



目录
相关文章
|
2月前
|
小程序
【经验分享】使用swiper组件制作文字上下滚动播报效果
【经验分享】使用swiper组件制作文字上下滚动播报效果
47 0
|
4月前
微信小游戏制作工具中文字设置的粗体不显示,怎么解决?
微信小游戏制作工具中文字设置的粗体不显示,怎么解决?
37 1
非常漂亮的纯css3实现多彩侧边导航(非常流畅),附效果演示
非常漂亮的纯css3实现多彩侧边导航(非常流畅),附效果演示
|
9月前
|
前端开发
前端代码分享——霓虹灯图标菜单特效(内含源码)
前端代码分享——霓虹灯图标菜单特效(内含源码)
|
11月前
|
小程序 开发者
如何制作一个闪屏页面
闪屏(Splash)指的是当你打开一个应用时,首先映入眼帘的那个界面。通常闪屏页面都会比较简单,因为要一闪而过(这大概就是为什么叫做闪屏了),一般都会放置产品的 LOGO,在游戏中通常会放置游戏制作团队或者工作室的 LOGO。
140 0
|
iOS开发
iOS开发-使用ShareSDK做分享如何让新浪分享后是可点击蓝色文字
iOS开发-使用ShareSDK做分享如何让新浪分享后是可点击蓝色文字
99 0
iOS开发-使用ShareSDK做分享如何让新浪分享后是可点击蓝色文字
|
自然语言处理 C++
制作有道词典——标题栏
制作有道词典——标题栏
制作有道词典——标题栏
|
前端开发 容器
如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1295 0
|
前端开发
如何用纯 CSS 创作一种按钮被瞄准的交互特效
效果预览 按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。 在线演示 https://codepen.io/zhang-ou/pen/ELWMLr 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1171 0