android Titanic （带波纹效果的TextView）源码分析（带源码）

一，实现原理

这里需要用到BitmapShader，用一张图片为图像渲染。

上面的图片是一张一半透明一半呈白色的图片，而且随x坐标起伏，能够形成波纹状。那么仅仅靠上面一张图片如何得到效果图中的效果呢？

设置着色器在x，y方向上分别为：REPEAT，CLAMP。x方向上会重复，y方向上会用边缘颜色填充。

1，创建shader

[java]  view plain  copy

 

1. private void createShader() {  
2.   
3.     if (wave == null) {  
4.         wave = getResources().getDrawable(R.drawable.wave);  
5.     }  
6.   
7.     int waveW = wave.getIntrinsicWidth();  
8.     int waveH = wave.getIntrinsicHeight();  
9.   
10.     Bitmap b = Bitmap.createBitmap(waveW, waveH, Bitmap.Config.ARGB_8888);  
11.     Canvas c = new Canvas(b);  
12.   
13.     c.drawColor(getCurrentTextColor());  
14.   
15.     wave.setBounds(0, 0, waveW, waveH);  
16.     wave.draw(c);  
17.   
18.     shader = new BitmapShader(b, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);    //设置着色器的TileMode  
19.     getPaint().setShader(shader);  
20.   
21.     offsetY = (getHeight() - waveH) / 2;    //计算偏移Y   默认放在textView的中间  
22. }  

offsetY为图中中间白线的位置。

2，绘图

[java]  view plain  copy

 

1. @Override  
2. protected void onDraw(Canvas canvas) {  
3.   
4.     // modify text paint shader according to sinking state  
5.     if (sinking && shader != null) {  
6.   
7.         // first call after sinking, assign it to our paint  
8.         if (getPaint().getShader() == null) {  
9.             getPaint().setShader(shader);  
10.         }  
11.   
12.         // translate shader accordingly to maskX maskY positions  
13.         // maskY is affected by the offset to vertically center the wave  
14.         shaderMatrix.setTranslate(maskX, maskY + offsetY);  //平移变换，设置着色图片的坐标 ，maskX，maskY为shader的坐标变换值  
15.   
16.         // assign matrix to invalidate the shader  
17.         shader.setLocalMatrix(shaderMatrix);  
18.     } else {  
19.         getPaint().setShader(null);  
20.     }  
21.   
22.     super.onDraw(canvas);  
23. }  

3，属性动画

[java]  view plain  copy

 

1. // horizontal animation. 200 = wave.png width  
2. //x方向上的变化,变换范围是从0-waveW  
3. ObjectAnimator maskXAnimator = ObjectAnimator.ofFloat(textView, "maskX", 0, 200);     
4. maskXAnimator.setRepeatCount(ValueAnimator.INFINITE);   //变换次数设为不限制  
5. maskXAnimator.setDuration(1000);  
6. maskXAnimator.setStartDelay(0);  
7.   
8. int h = textView.getHeight();  
9.   
10. // vertical animation  
11. // maskY = 0 -> wave vertically centered  
12. // repeat mode REVERSE to go back and forth  
13. //y方向是h/2 -> -h/2，折合偏移量，就是从textView底部到顶部。  
14. ObjectAnimator maskYAnimator = ObjectAnimator.ofFloat(textView, "maskY", h/2, - h/2);  
15. maskYAnimator.setRepeatCount(ValueAnimator.INFINITE);  
16. maskYAnimator.setRepeatMode(ValueAnimator.REVERSE);  
17. maskYAnimator.setDuration(10000);  
18. maskYAnimator.setStartDelay(0);  

maskX，maskY为shader偏移坐标。maskX从0到waveW变换，形成波纹效果。

在y方向上，从h(textView的高度)/2到-h/2变换，由于TileMode是CLAMP，就形成了上面是透明，下面是白色的效果。

二，拓展

这里实现了一个y方向上的移动波纹效果，那怎么做一个x方向上的？

思路如下：

wave。png顺时针旋转90度。然后x，y方向上的变化反过来就行了。这里我就不去实现了。

添加少量注释的完整代码

下载地址