立即春节，写个应景的控件
思路分析
1.红包沿着不同的轨迹由上往下运动
2.当手指捕获到一个红包，红包停止原先的运动，能够随着手指的滑动做跟手操作
3.当手指动作停止后，红包放大
4.通过滑动刮开红包，看到期待已久的money
大体知识点概况
1.属性动画，实现红包依照贝塞尔曲线运动和放大效果
2.实现一个可移动的view。能够參考我的还有一篇博客http://blog.csdn.net/xuan_xiaofeng/article/details/50463595
3.图片的结合模式，主要是实现刮开红包
4.自己定义控件的相关知识
实战
1.先来做个红包。
继承view，做点初始化的工作
private void init() {
mPath = new Path();
mRandom = new Random();
initPaint();
initMoneyPaint();
mText = moneys[mRandom.nextInt(moneys.length)];
//获取字体的宽高
moneyPaint.getTextBounds(mText, 0, mText.length(), mTextBound);
}
private void initPaint() {
mPaint = new Paint();
mPaint.setColor(Color.parseColor("#c0c0c0"));
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeCap(Paint.Cap.ROUND);
/**
* 设置接合处的形态
*/
mPaint.setStrokeJoin(Paint.Join.ROUND);
/**
* 抗抖动
*/
mPaint.setDither(true);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(PAINT_WIDTH);
}
/**
* money画笔
*/
private void initMoneyPaint() {
moneyPaint = new Paint();
moneyPaint.setColor(Color.RED);
moneyPaint.setAntiAlias(true);
moneyPaint.setTextSize(30);
mTextBound = new Rect();
moneyPaint.getTextBounds(moneys[0], 0, moneys[0].length(), mTextBound);
}
2.创建一个画布，就是一个绘制一个红包的图片。根据手指在控件上的滑动路径，除去图片的结合部分
mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap); Bitmap bitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.red_packet)); mCanvas.drawBitmap(bitmap, null, new RectF(0, 0, width, height), null); //设置图片的结合方式
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
mCanvas.drawPath(mPath, mPaint);
canvas.drawBitmap(mBitmap, 0, 0, null);
3.重写onTouchEvent方法记录手指的擦除路径以及实现跟手操作
public boolean onTouchEvent(MotionEvent event) {
x = (int) event.getX();
y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//路径的初始化位置
mPath.moveTo(x, y);
break;
case MotionEvent.ACTION_MOVE:
if (movable) {
// 跟手滑效果
setX(x + getLeft() + getTranslationX() - getWidth() / 2);
setY(y + getTop() + getTranslationY() - getHeight() / 2);
} else if (Math.abs(x - mLastX) > DEFAULT_PATH_INSTANCE || Math.abs(y - mLastY) > DEFAULT_PATH_INSTANCE) {
// 记录手指擦除路径
mPath.lineTo(x, y);
invalidate();
}
case MotionEvent.ACTION_UP:
MyAsyncTask task = new MyAsyncTask();
task.execute();
break;
}
//记录上次位置
mLastX = x;
mLastY = y;
return true;
}
4.附上完整的代码
public class RedPacketView extends ImageView {
private Paint mPaint, moneyPaint;
private Path mPath;
private Canvas mCanvas;
private Bitmap mBitmap;
private int x, y, mLastX, mLastY;
public boolean movable = true;
public boolean isTouch = false;
private String[] moneys = new String[]{"￥5", "￥10", "￥20", "￥50"};
private Rect mTextBound;
private String mText;
private Random mRandom;
private boolean isComplete = false;
/**
* 笔触的宽度
*/
private static final float PAINT_WIDTH = 20;
/**
* 默认绘制的最小距离
*/
private static final float DEFAULT_PATH_INSTANCE = 5;
public RedPacketView(Context context) {
super(context);
init();
}
public RedPacketView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public RedPacketView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPath = new Path();
mRandom = new Random();
initPaint();
initMoneyPaint();
//随机产生一个面值
mText = moneys[mRandom.nextInt(moneys.length)];
//获取字体的宽高
moneyPaint.getTextBounds(mText, 0, mText.length(), mTextBound);
}
private void initPaint() {
mPaint = new Paint();
mPaint.setColor(Color.parseColor("#c0c0c0"));
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeCap(Paint.Cap.ROUND);
/**
* 设置接合处的形态
*/
mPaint.setStrokeJoin(Paint.Join.ROUND);
/**
* 抗抖动
*/
mPaint.setDither(true);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(PAINT_WIDTH);
}
/**
* money画笔
*/
private void initMoneyPaint() {
moneyPaint = new Paint();
moneyPaint.setColor(Color.RED);
moneyPaint.setAntiAlias(true);
moneyPaint.setTextSize(30);
mTextBound = new Rect();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getMeasuredWidth();
int height = getMeasuredHeight();
try {
mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
Bitmap bitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.red_packet));
mCanvas.drawBitmap(bitmap, null, new RectF(0, 0, width, height), null);
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
protected void onDraw(Canvas canvas) {
try {
canvas.drawText(mText, getWidth() / 2 - mTextBound.width() / 2, getHeight() / 2 + mTextBound.height() / 2, moneyPaint);
if (isComplete) return;
//设置图片的结合方式
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
mCanvas.drawPath(mPath, mPaint);
canvas.drawBitmap(mBitmap, 0, 0, null);
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
x = (int) event.getX();
y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//路径的初始化位置
mPath.moveTo(x, y);
break;
case MotionEvent.ACTION_MOVE:
if (movable) {
// 跟手滑效果
setX(x + getLeft() + getTranslationX() - getWidth() / 2);
setY(y + getTop() + getTranslationY() - getHeight() / 2);
} else if (Math.abs(x - mLastX) > DEFAULT_PATH_INSTANCE || Math.abs(y - mLastY) > DEFAULT_PATH_INSTANCE) {
// 记录手指擦除路径
mPath.lineTo(x, y);
invalidate();
}
case MotionEvent.ACTION_UP:
MyAsyncTask task = new MyAsyncTask();
task.execute();
break;
}
//记录上次位置
mLastX = x;
mLastY = y;
return true;
}
/**
* 查看眼下的红包的擦除比例，实现全然擦除
*/
class MyAsyncTask extends AsyncTask{
@Override
protected Object doInBackground(Object[] params) {
clearOverPercent();
return null;
}
private void clearOverPercent()
{
int[] mPixels;
int w = getWidth();
int h = getHeight();
float wipeArea = 0;
float totalArea = w * h;
Bitmap bitmap = Bitmap.createBitmap(mBitmap);
mPixels = new int[w * h];
//拿到全部像素信息
bitmap.getPixels(mPixels, 0, w, 0, 0, w, h);
//获取擦除部分的面积
int index = 0;
for (int i = 0; i < w; i++) {
for (int j = 0; j < h; j++) {
if (mPixels[index] == 0) {
wipeArea++;
}
index++;
}
}
int percent = (int) (wipeArea / totalArea * 100);
if (percent > 70) {
isComplete = true;
postInvalidate();
}
}
};
}
5.实现发红包的父容器LaunchRedPacketLayout。
重点说下贝塞尔曲线动画部分的实现。实现的过程用到四个点。各自是起点，随机点1，随机点2，终点。
起点为控件的底部中点，终点为控件顶部的随意点即（x=n, y=0)。
随机点为控件内部随意点。当然为了更好的效果。点位分布均匀为佳。
6.有了四个点后，依据贝塞尔曲线的公式新建一个估值器，以便于计算红包当前的位置
/**
* 估值器
*/
static class BSEEvaluator implements TypeEvaluator<PointF> {
private PointF pointF1;
private PointF pointF2; public BSEEvaluator(PointF pointF1, PointF pointF2) {
this.pointF1 = pointF1;
this.pointF2 = pointF2;
} @Override
public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
PointF pointF = new PointF(); float lFraction = 1 - fraction; pointF.x = (float) (startValue.x * Math.pow(lFraction, 3) +
3 * pointF1.x * fraction * Math.pow(lFraction, 2) +
3 * pointF2.x * Math.pow(lFraction, 2) * fraction +
endValue.x * Math.pow(fraction, 3));
pointF.y = (float) (startValue.y * Math.pow(lFraction, 3) +
3 * pointF1.y * fraction * Math.pow(lFraction, 2) +
3 * pointF2.y * Math.pow(fraction, 2) * lFraction +
endValue.y * Math.pow(fraction, 3)); return pointF;
}
}
7.设置属性动画的监听器，不断将新的位置设置给红包，让红包动起来
private ValueAnimator getBSEValueAnimator(View target) {
//贝赛尔估值器
BSEEvaluator evaluator = new BSEEvaluator(getPoint(), getPoint());
ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF((mWidth - dWidth) / 2, mHeight - dHeight), new PointF(random.nextInt(mWidth), 0));
animator.addUpdateListener(new BSEListenr(target));
animator.setTarget(target);
animator.setDuration(3000);
return animator;
}
private class BSEListenr implements ValueAnimator.AnimatorUpdateListener {
private View target;
public BSEListenr(View target) {
this.target = target;
}
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//这里获取到贝塞尔曲线计算出来的的xy值
PointF pointF = (PointF) animation.getAnimatedValue();
target.setX(pointF.x);
target.setY(pointF.y);
}
}
8.提供发射红包的入口方法
/**
* 发射多个红包
*
* @param numb
*/
public void launch(int numb) throws Exception {
for (int i = 0; i < numb; i++)
launch();
} /**
* 发射红包
*/
public void launch() throws Exception {
final RedPacketView imageView = new RedPacketView(getContext());
imageView.setImageDrawable(drawable); //设置位置
LayoutParams layoutParams = new LayoutParams(dWidth, dHeight);
layoutParams.addRule(ALIGN_PARENT_BOTTOM, TRUE);
layoutParams.addRule(CENTER_HORIZONTAL, TRUE);
imageView.setLayoutParams(layoutParams); final Animator set = addAnimatior(imageView); imageView.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
x = (int) imageView.getX();
y = (int) imageView.getY(); if (!imageView.isTouch) {
imageView.isTouch = true;
set.end();
} if (MotionEvent.ACTION_UP == event.getAction()) {
if (imageView.movable) {
ObjectAnimator.ofFloat(imageView, View.ALPHA, 1f).start();
AnimatorSet setDown = new AnimatorSet();
setDown.playTogether(
ObjectAnimator.ofFloat(imageView, "scaleX", 0.8f, 1.5f),
ObjectAnimator.ofFloat(imageView, "scaleY", 0.8f, 1.5f)
);
setDown.start(); imageView.movable = false;
}
} return false;
}
}); addView(imageView);
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation); // 动画结束移除view
if (imageView.isTouch) {
imageView.setX(x);
imageView.setY(y);
} else {
removeView(imageView);
}
}
});
set.start();
}
9.附上完整代码
public class LaunchRedPacketLayout extends RelativeLayout {
private Drawable drawable;
private int dWidth;
private int dHeight;
private int mWidth;
private int mHeight;
int x, y;
/**
* 插值器组
*/
private Interpolator[] interpolatorsArray;
private Random random;
public LaunchRedPacketLayout(Context context) {
super(context);
init();
}
public LaunchRedPacketLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
drawable = getResources().getDrawable(R.drawable.red_packet);
dWidth = drawable.getIntrinsicWidth();
dHeight = drawable.getIntrinsicHeight();
random = new Random();
interpolatorsArray = new Interpolator[4];
interpolatorsArray[0] = new LinearInterpolator();
interpolatorsArray[1] = new AccelerateInterpolator();
interpolatorsArray[2] = new DecelerateInterpolator();
interpolatorsArray[3] = new AccelerateDecelerateInterpolator();
post(new Runnable() {
@Override
public void run() {
mHeight = getMeasuredHeight();
mWidth = getMeasuredWidth();
int curWidth = dWidth;
dWidth = mWidth / 5;
dHeight = dHeight * dWidth / curWidth;
}
});
}
/**
* 发射多个红包
*
* @param numb
*/
public void launch(int numb) throws Exception {
for (int i = 0; i < numb; i++)
launch();
}
/**
* 发射红包
*/
public void launch() throws Exception {
final RedPacketView imageView = new RedPacketView(getContext());
imageView.setImageDrawable(drawable);
//设置位置
LayoutParams layoutParams = new LayoutParams(dWidth, dHeight);
layoutParams.addRule(ALIGN_PARENT_BOTTOM, TRUE);
layoutParams.addRule(CENTER_HORIZONTAL, TRUE);
imageView.setLayoutParams(layoutParams);
final Animator set = addAnimatior(imageView);
imageView.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
x = (int) imageView.getX();
y = (int) imageView.getY();
if (!imageView.isTouch) {
imageView.isTouch = true;
set.end();
}
if (MotionEvent.ACTION_UP == event.getAction()) {
if (imageView.movable) {
ObjectAnimator.ofFloat(imageView, View.ALPHA, 1f).start();
AnimatorSet setDown = new AnimatorSet();
setDown.playTogether(
ObjectAnimator.ofFloat(imageView, "scaleX", 0.8f, 1.5f),
ObjectAnimator.ofFloat(imageView, "scaleY", 0.8f, 1.5f)
);
setDown.start();
imageView.movable = false;
}
}
return false;
}
});
addView(imageView);
set.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
// 动画结束移除view
if (imageView.isTouch) {
imageView.setX(x);
imageView.setY(y);
} else {
removeView(imageView);
}
}
});
set.start();
}
/**
* 设置动画
*
* @param target
*/
private Animator addAnimatior(View target) throws Exception {
AnimatorSet set = new AnimatorSet();
AnimatorSet enterSet = getEnterSet(target);
ValueAnimator bezierValueAnimator = getBSEValueAnimator(target);
set.playSequentially(enterSet, bezierValueAnimator);
set.setInterpolator(interpolatorsArray[random.nextInt(4)]);
set.setTarget(target);
return set;
}
private class BSEListenr implements ValueAnimator.AnimatorUpdateListener {
private View target;
public BSEListenr(View target) {
this.target = target;
}
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//这里获取到贝塞尔曲线计算出来的的x y值
PointF pointF = (PointF) animation.getAnimatedValue();
target.setX(pointF.x);
target.setY(pointF.y);
}
}
/**
* 设置贝赛尔曲线动画
*
* @param target
* @return
*/
private ValueAnimator getBSEValueAnimator(View target) {
//贝赛尔估值器
BSEEvaluator evaluator = new BSEEvaluator(getPoint(), getPoint());
ValueAnimator animator = ValueAnimator.ofObject(evaluator, new PointF((mWidth - dWidth) / 2, mHeight - dHeight), new PointF(random.nextInt(mWidth), 0));
animator.addUpdateListener(new BSEListenr(target));
animator.setTarget(target);
animator.setDuration(3000);
return animator;
}
private PointF getPoint() {
PointF pointF = new PointF();
pointF.x = random.nextInt(mWidth);
pointF.y = random.nextInt(mHeight - dHeight);
return pointF;
}
/**
* 估值器
*/
static class BSEEvaluator implements TypeEvaluator<PointF> {
private PointF pointF1;
private PointF pointF2;
public BSEEvaluator(PointF pointF1, PointF pointF2) {
this.pointF1 = pointF1;
this.pointF2 = pointF2;
}
@Override
public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
PointF pointF = new PointF();
float lFraction = 1 - fraction;
pointF.x = (float) (startValue.x * Math.pow(lFraction, 3) +
3 * pointF1.x * fraction * Math.pow(lFraction, 2) +
3 * pointF2.x * Math.pow(lFraction, 2) * fraction +
endValue.x * Math.pow(fraction, 3));
pointF.y = (float) (startValue.y * Math.pow(lFraction, 3) +
3 * pointF1.y * fraction * Math.pow(lFraction, 2) +
3 * pointF2.y * Math.pow(fraction, 2) * lFraction +
endValue.y * Math.pow(fraction, 3));
return pointF;
}
}
/**
* 入场动画
*
* @param target
* @return
*/
private AnimatorSet getEnterSet(View target) {
try {
AnimatorSet enterSet = new AnimatorSet();
enterSet.playTogether(
ObjectAnimator.ofFloat(target, View.ALPHA, 0, 1f),
ObjectAnimator.ofFloat(target, View.SCALE_X, 0.1f, 0.8f),
ObjectAnimator.ofFloat(target, View.SCALE_Y, 0.1f, 0.8f)
);
enterSet.setDuration(500);
enterSet.setInterpolator(new LinearInterpolator());
enterSet.setTarget(target);
return enterSet;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
10.试下
<? xml version="1.0" encoding="utf-8"? >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="sample.MainActivity"
tools:showIn="@layout/activity_main"> <com.empty.launchredpacket.LaunchRedPacketLayout
android:id="@+id/launchRedPacket"
android:layout_width="match_parent"
android:background="#faecec"
android:layout_height="400dp"
/> <Button
android:id="@+id/launchBtn"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_margin="5dp"
android:background="@color/colorPrimary"
android:text="发射"
android:textColor="@android:color/white" /> <Button
android:id="@+id/reStart"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_margin="5dp"
android:background="@color/colorPrimary"
android:text="又一次開始"
android:textColor="@android:color/white" />
</LinearLayout>
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private LaunchRedPacketLayout launchRedPacketLayout;
private Button launchBtn, reStartBtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
launchRedPacketLayout = (LaunchRedPacketLayout) findViewById(R.id.launchRedPacket);
launchBtn = (Button) findViewById(R.id.launchBtn);
reStartBtn = (Button) findViewById(R.id.reStart);
launchBtn.setOnClickListener(this);
reStartBtn.setOnClickListener(this);
}
@Override
public void onClick(View v) {
try {
switch (v.getId()) {
case R.id.reStart:
startActivity(new Intent(this, MainActivity.class));
finish();
overridePendingTransition(0, 0);
break;
case R.id.launchBtn:
launchRedPacketLayout.launch(3);
break;
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
总结
1.发射过多红包会引起页面卡顿，须要优化
2.代码结构还能够优化下
3.欢迎大家评论交流
十分感谢 程序亦非猿，hongyang 大神的博客