Android自定义View——刮刮卡效果

时间：2023-02-09 08:12:02

刮刮卡效果

效果图：

Android自定义View——刮刮卡效果

想要红包的实现效果的可以关注我的博客，仿饿了么红包

实现原理：

  • 下层图片：我们的红包的图片
  • 上层图片：有两部分
    • 一部分是灰色背景
    • 一部分是拥有透明度为0，并且模式为交集的画笔
  • 使用滑动监听，滑动时，用透明度为0的画笔画出透明和上层图片灰色的交集，交集即是透明的背景
  • 监听我们滑动的距离是否达到标准，达到标准后，使用子线程1s后自动展开剩余的灰色

实现步骤：

  • 初始化画笔
  • 初始化顶层图片和底层图片
  • 监听滑动事件，判断是否滑完
  • 使用onDraw()画出我们的上层图片和底层图片

步骤一

初始化画笔：

mPaint = new Paint();
mPaint.setAlpha(0);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(50);

画笔设置XferMode，DST_IN模式是交集模式，由于图片底层是灰色，上层是我们drawPath出来的透明度为0的路径，所以取交集，即透明的路径，达到涂刮的效果：

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

这两个属性可使画笔四个角变为圆角：

mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);

步骤二

初始化底层图片和顶层图片：

//初始化路径
mPath = new Path();
//初始化底层图片
mBgBitmap = BitmapFactory.decodeResource(getResources(),
        R.drawable.test);
//获取底层宽度
mBgBitmapWidth = mBgBitmap.getWidth();
//创建顶层图片
mFgBitmap = Bitmap.createBitmap(mBgBitmap.getWidth(),
mBgBitmap.getHeight(), Bitmap.Config.ARGB_8888);

为顶层图片加上画布，并画上灰色：

 //创建顶层画布
mCanvas = new Canvas(mFgBitmap);
//顶层画布画上灰色
mCanvas.drawColor(Color.GRAY);

步骤三

监听滑动事件，判断是否滑完：

case MotionEvent.ACTION_DOWN:
    mPath.reset();
    mPath.moveTo(event.getX(), event.getY());
break;
case MotionEvent.ACTION_MOVE:
    mPath.lineTo(event.getX(), event.getY());
    mCanvas.drawPath(mPath, mPaint);
    //重新绘制画面
    invalidate();

    dx = Math.abs(event.getX() - LastX);
    if (dx > 0) {
        //监听左右滑
        sumX += dx;
    }
break;

当手指松开时，判断是否滑完，以每一次左右滑累加得到的sumX和图片的宽度4倍比较，即是用手指左右滑动两个来回，并通过1秒延迟，让子线程重绘，涂刮剩余的灰色：

case MotionEvent.ACTION_UP:
new Thread() {
@Override
public void run() {
try {
if (sumX > mBgBitmapWidth * 4) {
                     isFinish = true;
                     Thread.sleep(1000);
                     postInvalidate();
                 }
             } catch (InterruptedException e) {
                 e.printStackTrace();
             }
         }
     }.start();
break;

记得在监听最后面重置LastY：

LastX = event.getX();
return true;

步骤四

我们的ondraw方法，只要判断是否滑完了，滑完了就不画上层图片：

@Override
protected void onDraw(Canvas canvas) {
    canvas.drawBitmap(mBgBitmap, 0, 0, null);
if (!isFinish) {
        canvas.drawBitmap(mFgBitmap, 0, 0, null);
    }
}

在布局文件中使用：

<com.handsome.app3.Custom.GuaGuaKa
     android:layout_width="wrap_content"
     android:layout_height="wrap_content" />

整个类的源码：

public class GuaGuaKa extends View {

private Bitmap mBgBitmap, mFgBitmap;
private Paint mPaint;
private Canvas mCanvas;
private Path mPath;
private float mBgBitmapWidth;
private float LastX, dx, sumX;
private boolean isFinish = false;

public GuaGuaKa(Context context) {
super(context);
        init();
    }

public GuaGuaKa(Context context, AttributeSet attrs) {
super(context, attrs);
        init();
    }

public GuaGuaKa(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
        init();
    }

private void init() {
//初始化透明画笔
        mPaint = new Paint();
        mPaint.setAlpha(0);
        mPaint.setXfermode(
new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(50);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
//初始化路径
        mPath = new Path();
//初始化底层图片
        mBgBitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.test);
//获取底层宽度
        mBgBitmapWidth = mBgBitmap.getWidth();
//创建顶层图片
        mFgBitmap = Bitmap.createBitmap(mBgBitmap.getWidth(),
                mBgBitmap.getHeight(), Bitmap.Config.ARGB_8888);
//创建顶层画布
        mCanvas = new Canvas(mFgBitmap);
//顶层画布画上灰色
        mCanvas.drawColor(Color.GRAY);
    }

@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
                mPath.reset();
                mPath.moveTo(event.getX(), event.getY());
break;
case MotionEvent.ACTION_MOVE:
                mPath.lineTo(event.getX(), event.getY());
                mCanvas.drawPath(mPath, mPaint);
//重新绘制画面
                invalidate();

                dx = Math.abs(event.getX() - LastX);
if (dx > 0) {
//监听左右滑
                    sumX += dx;
                }
break;
case MotionEvent.ACTION_UP:
new Thread() {
@Override
public void run() {
try {
if (sumX > mBgBitmapWidth * 4) {
                                isFinish = true;
                                Thread.sleep(1000);
                                postInvalidate();
                            }
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                    }
                }.start();
break;
        }
        LastX = event.getX();
return true;
    }

@Override
protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mBgBitmap, 0, 0, null);
if (!isFinish) {
            canvas.drawBitmap(mFgBitmap, 0, 0, null);
        }
    }
}
标签：

相关文章