Titanic (带波纹效果的TextView)源码分析
2015-04-29 17:34
309 查看
前一段时间用LinearGradient(线性渐变)
写了一个颜色变化闪动的文字控件和文字进度条/article/1904113.html,
最近在github上看到一个开源控件Titanic,特拿来分析一下,效果如下图:
上面的图片是一张一半透明一半呈白色的图片,而且随x坐标起伏,能够形成波纹状。那么仅仅靠上面一张图片如何得到效果图中的效果呢?
设置着色器在x,y方向上分别为:REPEAT,CLAMP。x方向上会重复,y方向上会用边缘颜色填充。
1,创建shader
offsetY为图中中间白线的位置。
2,绘图
maskX,maskY为shader偏移坐标。maskX从0到waveW变换,形成波纹效果。
在y方向上,从h(textView的高度)/2到-h/2变换,由于TileMode是CLAMP,就形成了上面是透明,下面是白色的效果。
思路如下:
wave。png顺时针旋转90度。然后x,y方向上的变化反过来就行了。这里我就不去实现了。
添加少量注释的完整代码
下载地址
写了一个颜色变化闪动的文字控件和文字进度条/article/1904113.html,
最近在github上看到一个开源控件Titanic,特拿来分析一下,效果如下图:
一,实现原理
这里需要用到BitmapShader,用一张图片为图像渲染。上面的图片是一张一半透明一半呈白色的图片,而且随x坐标起伏,能够形成波纹状。那么仅仅靠上面一张图片如何得到效果图中的效果呢?
设置着色器在x,y方向上分别为:REPEAT,CLAMP。x方向上会重复,y方向上会用边缘颜色填充。
1,创建shader
private void createShader() { if (wave == null) { wave = getResources().getDrawable(R.drawable.wave); } int waveW = wave.getIntrinsicWidth(); int waveH = wave.getIntrinsicHeight(); Bitmap b = Bitmap.createBitmap(waveW, waveH, Bitmap.Config.ARGB_8888); Canvas c = new Canvas(b); c.drawColor(getCurrentTextColor()); wave.setBounds(0, 0, waveW, waveH); wave.draw(c); shader = new BitmapShader(b, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP); //设置着色器的TileMode getPaint().setShader(shader); offsetY = (getHeight() - waveH) / 2; //计算偏移Y 默认放在textView的中间 }
offsetY为图中中间白线的位置。
2,绘图
@Override protected void onDraw(Canvas canvas) { // modify text paint shader according to sinking state if (sinking && shader != null) { // first call after sinking, assign it to our paint if (getPaint().getShader() == null) { getPaint().setShader(shader); } // translate shader accordingly to maskX maskY positions // maskY is affected by the offset to vertically center the wave shaderMatrix.setTranslate(maskX, maskY + offsetY); //平移变换,设置着色图片的坐标 ,maskX,maskY为shader的坐标变换值 // assign matrix to invalidate the shader shader.setLocalMatrix(shaderMatrix); } else { getPaint().setShader(null); } super.onDraw(canvas); }3,属性动画
// horizontal animation. 200 = wave.png width //x方向上的变化,变换范围是从0-waveW ObjectAnimator maskXAnimator = ObjectAnimator.ofFloat(textView, "maskX", 0, 200); maskXAnimator.setRepeatCount(ValueAnimator.INFINITE); //变换次数设为不限制 maskXAnimator.setDuration(1000); maskXAnimator.setStartDelay(0); int h = textView.getHeight(); // vertical animation // maskY = 0 -> wave vertically centered // repeat mode REVERSE to go back and forth //y方向是h/2 -> -h/2,折合偏移量,就是从textView底部到顶部。 ObjectAnimator maskYAnimator = ObjectAnimator.ofFloat(textView, "maskY", h/2, - h/2); maskYAnimator.setRepeatCount(ValueAnimator.INFINITE); maskYAnimator.setRepeatMode(ValueAnimator.REVERSE); maskYAnimator.setDuration(10000); maskYAnimator.setStartDelay(0);
maskX,maskY为shader偏移坐标。maskX从0到waveW变换,形成波纹效果。
在y方向上,从h(textView的高度)/2到-h/2变换,由于TileMode是CLAMP,就形成了上面是透明,下面是白色的效果。
二,拓展
这里实现了一个y方向上的移动波纹效果,那怎么做一个x方向上的?思路如下:
wave。png顺时针旋转90度。然后x,y方向上的变化反过来就行了。这里我就不去实现了。
添加少量注释的完整代码
下载地址
相关文章推荐
- android Titanic (带波纹效果的TextView)源码分析(带源码)
- android-autofittextview自适应字体大小源码分析。
- android:hint属性对TextView(或者EditText)的影响--源码分析
- android github 源码学习 --文本滚动效果 TextViewScroll
- ExpandableTextView源码分析
- Android-TextView跑马灯效果实现与分析
- 【Android 界面效果45】ViewPager源码分析
- 【Android开源项目解析】背景有波浪效果的TextView——从Titanic项目学习BitmapShader的使用
- 开源项目ExpandableTextView使用和源码分析
- android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K线图等源码
- 【Android 界面效果45】ViewPager源码分析
- TextView 的新特性,Autosizing 到底是如何实现的? | 源码分析
- 自定义TextView跑马灯效果,可控制启动,停止,和速度(含源码)
- Android上一个类似PathMenu效果的自定义View源码分析
- 为Android5.0及以上版本中的TextView等控件设置波纹效果
- TextView 的新特性,Autosizing 到底是如何实现的? | 源码分析
- AutoCompleteTextView的使用和源码分析以及实现响应式输入提示功能
- android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K线图等源码
- Android TextView加上阴影效果
- 给TextView加上多彩效果:改变部分字体的大小和颜色