背景知识
使用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