『Android自定义View实战』自定义完美的刮刮乐效果

前言

在很多电商或者金融类App中，经常会有各种线上抽奖活动，为了提高用户的交互性，让用户对中奖的体验度更为真实，许多场景都会采用在线刮奖的UI设计，其中就有模仿真实刮刮乐的特效，例如支付宝支付成功之后的刮奖，本文将仿照这种交互定制成一个控件，最终效果如下：

YScratchView.gif

 

实现

思路

可以看到，主要由两个层次叠加而成，一个是底部真实要展示的刮奖结果，一个是盖上上面的灰色蒙层，当用户手指滑动的时候需要涂抹掉手指划过的区域，可以监听记录手指滑动的路径，然后结合混合模式将其路径区域设为透明，露出底部真实内容，从而得到刮奖的效果。另外还要注意监听用户什么时候刮出结果，以及路径曲线的优化。主要步骤和实现方式如下：

1.绘制底部真实内容和灰色蒙层
2.监听手指划过的路径，利用PorterDuffXfermode混合模式绘制路径
3.优化手指绘制路径
4.监听刮出结果的时机

涂抹截图

 

1.绘制底部真实内容和灰色蒙层

底部真实内容可能是一张图片或者是一个布局，这里先以图片为例，将资源Id加载成对应的Bitmap绘制在我们自定义的控件的画布上：

public class YScratchView extends View {

  //真实结果Bitmap
  private Bitmap mBgBm;

  public YScratchView(Context context) {
        super(context, null);
    }

    public YScratchView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public YScratchView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init(){
      mBgBm = BitmapFactory.decodeResource(getResources(), R.drawable.xxx);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(mBgBm, 0, 0, null);
    }
}

其实就是简单地将图片资源解析为Bitmap对象并绘制到画布上，然后接着绘制我们的灰色蒙层：

public class YScratchView extends View {

    private Bitmap mBgBm, mGrayBm；
    private Canvas mGrayCanvas;
    private Paint mBgPaint;

    //...构造方法同上，不重复贴了

    private void init(){
        mBgBm = BitmapFactory.decodeResource(getResources(), R.drawable.xxx);
        mBgPaint = new Paint();
        mBgPaint.setColor(Color.GRAY);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mWidth = right - left;
        mHeight = bottom - top;
        initGrayArea();
        mIsInit = true;
    }

    private void initGrayArea() {
        mGrayBm = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
        mGrayCanvas = new Canvas(mGrayBm);
        mGrayCanvas.drawColor(Color.GRAY);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制奖品结果图
        canvas.drawBitmap(mBgBm, 0, 0, null);
        //绘制灰色蒙层
        canvas.drawBitmap(mGrayBm, 0, 0, mBgPaint);
    }
}

首先获得控件的宽高，然后再用这个宽高值去生成一张灰色的Bitmap，并获取其画布（后面会用到），然后将其绘制在控件上，效果如下：

底部奖品与灰色蒙层

 

2.监听手指划过的路径，利用PorterDuffXfermode混合模式绘制路径

每次手指触摸屏幕时，可以onTouchEvent监听触摸的坐标，再通过坐标去记录和追加路径的位置：

@Override
public boolean onTouchEvent(MotionEvent event) {
    mMoveX = event.getX();
    mMoveY = event.getY();
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mTouchPath.moveTo(mMoveX, mMoveY);
            invalidate();
            return true;
        case MotionEvent.ACTION_MOVE:
            float endX = event.getX();
            float endY = event.getY();
            mTouchPath.lineTo(endX, endY);
            invalidate();
            return true;
    }
    return super.onTouchEvent(event);
}

路径记录好了自然要在onDraw中搞事情了~，可以看到在追加路径的同时，调用invalidate不断去刷新画布，我们要的效果是涂抹的地方去除灰色层，露出底部背景图，那么可以利用混合模式中的PorterDuff.Mode.XOR模式来绘制这个路径，PorterDuff.Mode.XOR就是在两个图像相交的地方不进行绘制，我们先举个例子理解下这种模式的作用：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));

    Bitmap bm1 = Bitmap.createBitmap(600, 600, Bitmap.Config.ARGB_8888);
    Canvas c1 = new Canvas(bm1);
    Paint p1 = new Paint(Paint.ANTI_ALIAS_FLAG);
    p1.setColor(Color.parseColor("#00b7ee"));
    c1.drawOval(new RectF(0, 0, 600, 600), p1);

    Bitmap bm2 = Bitmap.createBitmap(600, 600, Bitmap.Config.ARGB_8888);
    Canvas c2 = new Canvas(bm2);
    Paint p2 = new Paint(Paint.ANTI_ALIAS_FLAG);
    p2.setColor(Color.parseColor("#ec6941"));
    c2.drawRect(0, 0, 600, 600, p2);

    canvas.drawBitmap(bm1,0, 0, mPaint);
    canvas.drawBitmap(bm2, 300, 300, mPaint);
}

这里绘制了一个矩形和一个圆形，并故意让其位置有交集部分，为画笔设置PorterDuff.Mode.XOR之后，效果如下：

XOR混合模式示意图
可以看到两者交集部分变成了透明，也就是如果都有色彩的话，相交的地方完全不绘制。回到我们刚才的自定义View，灰色蒙层与手势路径，其实就相当于这两个角色，将它们交集的部分（也就是手势划过的地方）采用XOR绘制，那么就会使得灰色蒙层被擦除，从而显示出底部奖品图：

//初始化手势路径画笔
mPathPaint = new Paint();
mPathPaint.setColor(Color.GRAY);
mPathPaint.setStrokeWidth(30);
mPathPaint.setStyle(Paint.Style.STROKE);
mPathPaint.setStrokeJoin(Paint.Join.ROUND);
mDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.XOR);
mPathPaint.setXfermode(mDuffXfermode);

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    //...这里省略绘制底部图案和灰色蒙层的代码，详见步骤一

    mGrayCanvas.drawRect(0, 0, mWidth, mHeight, mBgPaint);
    mGrayCanvas.drawPath(mTouchPath, mPathPaint);
}

可以看到，在灰色蒙层的画布上，先绘制一个矩形，然后再根据手势路径和混合模式，将手指划过的地方都变成了透明：

涂抹灰色蒙层.gif

 

3.优化手指绘制路径

上面已经实现了大体的效果，但是仔细看会发现，画笔的路径绘制有些许生硬，特别是在画笔宽度比较小的时候更为明显，这是由于我们是通过Path的lineTo去移动路径的，所以其实放大了看是一段段很小的直线连接而成，我们可以通过贝塞尔曲线，让路径的过度不至于那么生硬，并且调整画笔的宽度：

@Override
public boolean onTouchEvent(MotionEvent event) {
    mMoveX = event.getX();
    mMoveY = event.getY();
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mTouchPath.moveTo(mMoveX, mMoveY);
            invalidate();
            return true;
        case MotionEvent.ACTION_MOVE:
            float endX = event.getX();
            float endY = event.getY();
            mTouchPath.quadTo((endX - mMoveX) / 2 + mMoveX, (endY - mMoveY) / 2 + mMoveY, endX, endY);
            invalidate();
            return true;
    }
    return super.onTouchEvent(event);
}

可以看到在移动手指的时候，将贝塞尔曲线的锚点设置在曲线的中间，通过quadTo代替lineTo去移动路径，效果如下：

优化涂抹路径.gif

 

4.监听刮出结果的时机

上面已经完成了显示部分，还有一个重要的点就是要捕获刮出结果的时机，比如客户端要监听这个时机做一些其他的操作等等，那么要如何捕获这个时机呢？Bitmap对象有一个getPixel(x, y)方法，它可以获得对应坐标位置的颜色值，如果该位置是透明，那么getPixel就会返回0，那么以此可以计算出Bitmap被绘制成透明的区域是多少，然后与我们自定义View的总面积进行对比，当超过一定比例之后就判定为涂抹完成。（这个比例自己决定，当然越高就越精准，但也需要用户划得更久）

private Runnable mRunnable = new Runnable() {
    @Override
    public void run() {
        if (mThread.isInterrupted()) {
            return;
        }
        while (!mHasFinish) {
            SystemClock.sleep(500);
            if(mIsInit){
                for (int i = 0; i < mWidth; i++) {
                    for (int j = 0; j < mHeight; j++) {
                        int pixel = mGrayBm.getPixel(i, j);
                        if (pixel == 0) {
                            mScratchSize++;
                        }
                    }
                }
                checkFinish();
            }
            mScratchSize = 0;
        }
    }
};

private void checkFinish(){
    float totalArea = mWidth * mHeight;
    if (mScratchSize / totalArea > 0.8f) {
        post(new Runnable() {
            @Override
            public void run() {
                if (mListener != null) {
                    mListener.finish();
                }
            }
        });
        mHasFinish = true;
    }
}

开启一个线程，每隔一小段时间就去检测灰色蒙层位图的每个像素的颜色值，将透明的像素点累加起来，即为当前透明的区域，然后与整体面积做对比，这里我定为超过80%就表示涂抹成功（用户刮到这个程度都能大概看清楚抽奖结果是什么了），回调出去，并且记得回调的地方要切换回主线程。
 

结语

整体效果比较简单，主要是巧用混合模式去涂抹蒙层，贝塞尔曲线的优化，以及像素颜色的判断，另外还有可能是奖品结果图并不是一张图片，而是一个布局的情况，这种场景也做了触摸事件的兼容和支持，完整代码已上传到 一个集合酷炫效果的自定义组件库，欢迎Issue。
 

欢迎关注 Android小Y 的简书，更多Android精选自定义View

『Android自定义View实战』实现一个小清新的弹出式圆环菜单
『Android自定义View实战』玩转PathMeasure之自定义支付结果动画
『Android自定义View实战』自定义弧形旋转菜单栏——卫星菜单
『Android自定义View实战』自定义带入场动画的弧形百分比进度条

GitHub：GitHub-ZJYWidget
CSDN博客：IT_ZJYANG
简 书：Android小Y
在 GitHub 上建了一个集合炫酷自定义View的项目，里面有很多实用的自定义View源码及demo，会长期维护，欢迎Star~ 如有不足之处或建议还望指正，相互学习，相互进步，如果觉得不错动动小手点个喜欢， 谢谢~

关注Android 技术小栈，更多精彩原创