开发者社区> code_xzh> 正文

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

简介: 实现原理: 对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



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
用duilib制作仿QQ2013动态背景登录器
转载请说明原出处,谢谢~~         在上一篇博客里,我修复了CActiveXUI控件的bug,从而可以使用flash动画来制作程序的背景,这篇博客说明一下应该怎么使用CActiveXUI控件创建透明无窗体的背景。
1165 0
仿百度壁纸客户端(四)——自定义上拉加载实现精选壁纸墙
<div class="markdown_views"> <h1 id="仿百度壁纸客户端四自定义上拉加载实现精选壁纸墙">仿百度壁纸客户端(四)——自定义上拉加载实现精选壁纸墙</h1> <hr> <h2 id="百度壁纸系列">百度壁纸系列</h2> <blockquote> <p><a href="http://blog.csdn.net/qq_26787115/
1494 0
分享一个jquery插件-主要用于显示微博人的图像和鼠标提示等poshytip
大家国庆快乐! 这种效果常常有两个需求   1 鼠标移动到人图像上时,显示这个人的信息,鼠标离开人图像时隐藏这个人的相关信息 2当鼠标移动到到人的信息块时,信息依然显示,当鼠标离开人的信息块时,信息隐藏 3 必须是自动关闭而不是手动关闭 例如: 通常第一个比较容易满足,但是第一个在...
738 0
仿百度壁纸客户端(六)——完结篇之Gallery画廊实现壁纸预览已经项目细节优化
<div class="markdown_views"> <h1 id="仿百度壁纸客户端六完结篇之gallery画廊实现壁纸预览已经项目细节优化">仿百度壁纸客户端(六)——完结篇之Gallery画廊实现壁纸预览已经项目细节优化</h1> <hr> <h2 id="百度壁纸系列">百度壁纸系列</h2> <blockquote> <p><a href="http://
1837 0
如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1179 0
[silverlight基础]仿文字连接跑马灯效果-高手绕道
运行效果如下: 分析示意图:代码:  1     2             3                 4             5             6                 7                     8              ...
871 0
【技术贴】关于百度搜索框打不上任何文字的解决办法。。。
问:百度搜索框、搜狗搜索之类的框框打不上字 无法进行搜索怎么办? 答:先把浏览器全部关闭。        开始--运行--regsvr32 mshtmled.dll         搞定!!! .
895 0
Bootstrap3.0学习第十五轮(大屏幕介绍、页面标题、缩略图、警示框、Well)
详情请查看 http://aehyok.com/Blog/Detail/22.html   个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:http://www.cnblogs.com/aehyok/p/3981965.html 感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,那不妨点个推荐吧,谢谢支持:-O。
674 0
+关注
code_xzh
对前端移动客户端技术比较擅长。著有《React Native移动开发实战》和《Kotlin入门与实战》和《Weex跨平台实战》,《React Native移动开发进阶》即将出版,正在努力完成《Flutter跨平台开发实战》
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
3D动画的菜谱式灯光与云渲染
立即下载
优酷暗黑模式
立即下载
《优酷响应式布局技术全解析》
立即下载