转换黑白的加载控件

转换黑白的加载控件

看到腾讯动漫的一个加载控件是自己的图标由黑白变成彩色，就研究了一下写了一个类似效果的控件.
为了实现这个效果，开始我觉得用两张bitmap重叠实现最好了，先将一张黑白化，在让两张重叠的现实。后来我发现了 paint的setColorFilter的方法，通过这个方法我们可以轻松渲染出黑白的图片。闲话少说上代码：

public class GraphDrawable extends Drawable {    public  static int MAX_NUM = 100;    private Paint mPaint;    private Paint mBPaint;    private Bitmap bitmap;    private int CurrentNum;    private int MaxNum = MAX_NUM;    private int height;    private int width;    private Rect mSrcRect = new Rect();    private Rect mSrcRect2 = new Rect();    private Rect mDesRect = new Rect();    private Rect mDesRect2 = new Rect();    private int colorheight;    private int whiteheight;    private int colorbitmapheight;    private int whitebitmapheight;    public GraphDrawable() {        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mBPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        ColorMatrixColorFilter colorFilter = new ColorMatrixColorFilter(new float[]{                0.33F, 0.59F, 0.11F, 0, 0,                0.33F, 0.59F, 0.11F, 0, 0,                0.33F, 0.59F, 0.11F, 0, 0,                0, 0, 0, 1, 0,        });        mBPaint.setColorFilter(colorFilter);    }    public void setFrame(int height,int width){        this.height = height;        this.width = width;    }    public void setBitmap(Bitmap bitmap){        this.bitmap = bitmap;    }    public void setPercent(int percentnum){        if(percentnum <= MaxNum) {            this.CurrentNum = percentnum;            colorbitmapheight = (int)((double)CurrentNum / (double)MaxNum * bitmap.getHeight() );            whitebitmapheight = bitmap.getHeight() - colorbitmapheight;            colorheight =(int)((double)colorbitmapheight / (double)bitmap.getHeight() * height );            whiteheight = height - colorheight;            Log.d("height","bitmap height : " + whitebitmapheight + "r height : " + whiteheight);        }    }    @Override    public void draw(Canvas canvas) {        if(bitmap != null) {            mSrcRect.set(0, 0, bitmap.getWidth(), whitebitmapheight);            mSrcRect2.set(0,whitebitmapheight,bitmap.getWidth(),bitmap.getHeight());            mDesRect.set(0, 0, width, whiteheight);            mDesRect2.set(0, whiteheight,width,height);            canvas.drawBitmap(bitmap, mSrcRect, mDesRect, mBPaint);            canvas.drawBitmap(bitmap,mSrcRect2,mDesRect2,mPaint);        }    }    @Override    public void setAlpha(int alpha) {    }    @Override    public void setColorFilter(ColorFilter colorFilter) {    }    @Override    public int getOpacity() {        return PixelFormat.TRANSLUCENT;    }}

我将图片的渲染方法放到了GraphDrawable这个类中，而控制展现的在ImageLoadView这个View中

public class ImageLoadView extends View {    private GraphDrawable mDrawable;    public ImageLoadView(Context context) {        super(context);    }    public ImageLoadView(Context context, AttributeSet attrs) {        super(context, attrs);    }    public ImageLoadView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    public void setImageResource(int id){        mDrawable = new GraphDrawable();        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),id);        mDrawable.setBitmap(bitmap);        invalidate();    }    public void percent(int percent){        mDrawable.setPercent(percent);        invalidate();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if(mDrawable != null){            mDrawable.setFrame(getHeight(),getWidth());            mDrawable.draw(canvas);        }    }}

效果如下图