时间:2021-05-20
介绍
在小米的开机动画和一些欢迎界面中, 我们经常看到这种闪闪发光的流光字体。看起来很炫酷,其实实现原理相当简单,我们只需要写自定义控件继承TextView,然后使用渲染器Gradient设置颜色渐变和Paint的setShadowLayer方法设置阴影,然后不断刷新改变位移即可。
实现
首先写一个shineTextView类继承自TextView.
public class ShineTextView extends TextView{ // 线性渐变渲染 private LinearGradient mLinearGradient; //环形渐变渲染 private RadialGradient mRadialGradient; // 渲染矩阵 private Matrix mGradientMatrix; // 画笔 private Paint mPaint; private int mViewWidth = 0; // 亮度位移距离 private int mTranslate = 0; public ShineTextView(Context context, AttributeSet attrs) { super(context, attrs); }在这段代码中 ,我们定义了两个颜色渲染器
// 线性渐变渲染 private LinearGradient mLinearGradient; //环形渐变渲染 private RadialGradient mRadialGradient;LinearGradient 是线性渐变渲染 ,代表颜色的渐变呈直线方向递变。
我们可以使用LinearGradient 来实现上面第二张图中的效果
RadialGradient 是环形渐变渲染 ,代表颜色的渐变呈圆环形递变。
我们可以使用RadialGradient 来实现上面第一张图中小米开机动画的效果。
我们通过控制mTranslate 亮度位移距离来使颜色产生动态变化的效果。
OnSizeChanged
@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); if (mViewWidth == 0 || mViewHeight==0) { mViewWidth = getMeasuredWidth(); mViewHeight=getMeasuredHeight(); if (mViewWidth > 0 || mViewHeight>0 ) { mPaint = getPaint(); // 创建RadialGradient对象 // 第一个,第二个参数表示渐变圆中心坐标 // 第三个参数表示半径 // 第四个,第五个,第六个与线性渲染相同 mRadialGradient = new RadialGradient(50, 50,30, new int[] { 0x11FEB726, 0xffFEB726, 0x33FEB726 }, new float[] { 0, 0.5f, 1 }, Shader.TileMode.CLAMP); // 创建LinearGradient对象 // 起始点坐标(-mViewWidth, 0) 终点坐标(0,0) // 第一个,第二个参数表示渐变起点 可以设置起点终点在对角等任意位置 // 第三个,第四个参数表示渐变终点 // 第五个参数表示渐变颜色 // 第六个参数可以为空,表示坐标,值为0-1 // 如果这是空的,颜色均匀分布,沿梯度线。 // 第七个表示平铺方式 // CLAMP重复最后一个颜色至最后 // MIRROR重复着色的图像水平或垂直方向已镜像方式填充会有翻转效果 // REPEAT重复着色的图像水平或垂直方向 mLinearGradient = new LinearGradient(-mViewWidth, 0, 0, 0, new int[] { 0x33ffffff, 0xffffffff, 0x33ffffff }, new float[] { 0, 0.5f, 1 }, Shader.TileMode.CLAMP); mPaint.setShader(mRadialGradient); mPaint.setColor(Color.parseColor("#ffffffff")); //设置字体阴影效果 //第一个参数代表阴影的半径 //第二个参数代表阴影在X方向的延伸像素 //第三个参数代表阴影在Y方向的延伸像素 mPaint.setShadowLayer(3, 2, 2, 0xFFFF00FF); mGradientMatrix = new Matrix(); } } }在OnSizeChange方法中,我们主要完成一些初始化操作,比如获取控件宽高、初始化颜色渲染器和设置字体阴影效果。
onDraw
接下来最后一步,我们只需要在onDraw方法中绘制效果,并且通过Matrix矩阵来使渐变效果产生位移就可以了。
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if ( mGradientMatrix != null) { mTranslateX += mViewWidth / 10; mTranslateY += mViewHeight / 10; if (mTranslateX > 2 * mViewWidth || mTranslateY >2*mViewHeight) { mTranslateX = -mViewWidth; mTranslateY = -mViewHeight; } mGradientMatrix.setTranslate(mTranslateX, mTranslateY); // mLinearGradient.setLocalMatrix(mGradientMatrix); mRadialGradient.setLocalMatrix(mGradientMatrix); postInvalidateDelayed(50); } }源码下载:http://xiazai.jb51.net/201701/yuanma/AndroidShineText(jb51.net).rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言:前面几篇讲了自定义控件绘制原理Android自定义控件基本原理详解(一),Android自定义控件之自定义属性(二),Android自定义控件之自定义组合
前言:前两篇介绍了自定义控件的基础原理Android自定义控件基本原理详解(一)、Android自定义控件之自定义属性(二)。今天重点介绍一下如何通过自定义组合
本文讲述绘制Android自定义各种图形效果,为自定义控件的入门篇相关视频链接:Android自定义控件系列http://edu.csdn.net/course
在Android开发中,往往要用到自定义的控件来实现我们的需求或效果。在使用自定义控件时,难免要用到自定义属性,那怎么使用自定义属性呢?在文件res/value
《闪闪发光的萤火虫》是一款非常具有挑战性的游戏,玩家在一个环境优美的世界里,扮演一只闪闪发光的勇敢萤火虫寻找自己由于可怕事故被分散在神秘花园各地的孩子。玩家必须