在初探自定義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