在初探自定义View(一)里面,我们在原生TextView的基础上做了一点小修改,最后实现了想要的效果,今天的任务主要是希望View能够“动”起来---文字闪动效果。
在动手之前我们先来了解一下欲实现这个效果需要用到哪些类:
1.LinearGradient
1.LinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[], TileMode tile)
第一个参数为线性起点的x坐标
第二个参数为线性起点的y坐标
第三个参数为线性终点的x坐标
第四个参数为线性终点的y坐标
第五个参数为实现渐变效果的颜色的组合
第六个参数为前面的颜色组合中的各颜色在渐变中占据的位置(比重),如果为空,则表示上述颜色的集合在渐变中均匀出现
第七个参数为渲染器平铺的模式,一共有三种
-CLAMP
边缘拉伸
-REPEAT
在水平和垂直两个方向上重复,相邻图像没有间隙
-MIRROR
以镜像的方式在水平和垂直两个方向上重复,相邻图像有间隙
2.public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, TileMode tile)
其他参数同上
int color0表示渐变起始颜色
int color1表示渐变终止颜色
可以简单地把LinearGradient理解成一个着色器,可以根据要求来制定效果
2.Matrix
Matrix就简单一点了,简单地理解成一个可移动的画布。
下面开始正式开始绘制:
1.绘制工作的核心就是先设置一个不断变化的LinearGradient,然后使Paint带上这个属性来绘制文字,感官上就觉得文字在闪动,自定义View的第一步往往是初始化所需的工具,如LinearGradient、Paint等等:
protected void onSizeChanged(int w,int h,int oldw,int oldh){
super.onSizeChanged(w,h,oldw,oldh);
/*mViewWidth=w;*/
if (mViewWidth==0){
mViewWidth=getMeasuredWidth();
Log.d("tag","width is " + mViewWidth);
if (mViewWidth>0){
Paint mPaint=getPaint();
mLinearGradient=new LinearGradient(0,0,mViewWidth,0,new int[]{Color.BLUE,Color.RED,
Color.BLUE},null, Shader.TileMode.CLAMP);//LinearGradient类是Shader类的子类
mPaint.setShader(mLinearGradient);
mGradientMatrix=new Matrix();//可理解成有轨道的画板
}
}
}
2.最后在onDraw()方法中,让这个矩阵滑板以一定的速度和频率进行移动,从而产生文字闪动效果:
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
if (mGradientMatrix!=null){
mTranslate+=mViewWidth/5;
if (mTranslate>mViewWidth){ //改变闪烁的频率,反比例变化
mTranslate=-mTranslate;
}
mGradientMatrix.setTranslate(mTranslate,0);
mLinearGradient.setLocalMatrix(mGradientMatrix);
postInvalidateDelayed(100);//改变一次闪烁中颜色变化的速度,也就是画布移动的速度
}
}
由于在执行super.onDraw(canvas)
了之后,文字的绘制工作已经完成,所以实际上在绘制之前,Paint已经有了Matrix和LinearGradient的属性,这样在绘制文字的时候就能产生动态的闪动效果。
最后附上动态效果图:
溜了溜了,再会Still foolish
网友评论