背景知識

使用Xfermode中的PorterDuffXfermode實現我們的刮獎效果
PorterDuffXfermode 這是一個非常強大的轉換模式，使用它，可以使用影象合成的16條Porter-Duff規則的任意一條來控制Paint如何與已有的Canvas影象進行互動。
我們來看下官方的效果圖

這裡就不一一講述了，我們採用的是DcIn的模式–在源圖和目標圖相交的地方畫目標影象

程式碼實現

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import
 
 android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;
import
 
 android.view.WindowManager;

/**
 * 紅包效果
 *
 * @author tonywang
 */
public class RedPacketView extends View {
    private int mScaleTouchSlop;
    //紅包內容圖片
    private Bitmap mFgBitmap;
    //紅包遮擋物圖片
    private Bitmap mBgBitmap;
    //刮紅包路徑
    private Path mPath;
    //用於來遮擋物圖片和手指路徑相交效果的canvas
    private Canvas mCanvas;
    //之前的x座標
 

    private float preX;
    //之前的y座標
    private float preY;
    //採用Xfermode的paint
    private Paint mPaint;

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

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

    private void init(Context context) {
        //獲得系統的最小有效滑動距離，習慣上採用2倍距離
        ViewConfiguration viewConfiguration = ViewConfiguration.get(context);
        mScaleTouchSlop = 2 * viewConfiguration.getScaledTouchSlop();

        WindowManager wm = (WindowManager) getContext()
                .getSystemService(Context.WINDOW_SERVICE);

        int screenW = wm.getDefaultDisplay().getWidth();
        int screenH = wm.getDefaultDisplay().getHeight();

        mPath = new Path();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        mPaint.setARGB(128, 25, 0, 0);
        //這裡就是設定PorterDuffXfermode，模式指定為DST_IN
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        mPaint.setStyle(Paint.Style.STROKE);
        //為了效果更貼近手指滑動，設定連線處為圓形
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        //寬度為50
        mPaint.setStrokeWidth(50);

        // 生成前景圖Bitmap
        mFgBitmap = Bitmap.createBitmap(screenW, screenH, Bitmap.Config.ARGB_8888);
        // 將其注入畫布
        mCanvas = new Canvas(mFgBitmap);
        // 繪製畫布背景為中性灰，這個也是我們的源圖
        mCanvas.drawColor(0xFF808080);
        // 獲取背景底圖Bitmap
        mBgBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.prize_none);
        // 縮放背景底圖Bitmap至螢幕大小
        mBgBitmap = Bitmap.createScaledBitmap(mBgBitmap, screenW, screenH, true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //繪製背景
        canvas.drawBitmap(mBgBitmap, 0, 0, null);
        //繪製前景
        canvas.drawBitmap(mFgBitmap, 0, 0, null);
        //畫路徑，繪製目標圖
        mCanvas.drawPath(mPath, mPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.reset();
                mPath.moveTo(x, y);
                preX = x;
                preY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                float dx = Math.abs(x - preX);
                float dy = Math.abs(y - preY);
                if (dx > mScaleTouchSlop || dy > mScaleTouchSlop) {
                    mPath.quadTo(preX, preY, (x + preX) / 2, (y + preY) / 2);
                    preX = x;
                    preY = y;
                }
                break;
        }
        //千萬注意加上invalidate，使view重繪
        invalidate();
        return true;
    }
}

100多行程式碼就能完成這個刮獎動畫
xml就不介紹了，只要在一個ViewGroup里加入控制元件就好了

來看看效果



如果你想把他用到你的專案中，還需要對path的寬度做一個適配

git地址:https://github.com/TonyW92/android-redPacketView