码迷,mamicode.com
首页 > 其他好文 > 详细

Titanic (带波纹效果的TextView)源码分析

时间:2015-04-29 19:53:48      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:自定义控件   textview   ui   波纹效果   

前一段时间用LinearGradient(线性渐变) 写了一个颜色变化闪动的文字控件和文字进度条http://blog.csdn.net/huweigoodboy/article/details/43088953

最近在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方向上的变化反过来就行了。这里我就不去实现了。


添加少量注释的完整代码




Titanic (带波纹效果的TextView)源码分析

标签:自定义控件   textview   ui   波纹效果   

原文地址:http://blog.csdn.net/huweigoodboy/article/details/45369123

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!