自定义View抛物线爆炸动画
一、最近在写商城方面的业务，需求在商品加如购物车过程中，实现一个抛物线加入的动画。
先看我写的效果图：
ezgif.com-video-to-gif (3).gif
二、编写前的设计思路是：
ImageView的抛物线动画较好实现，难点在于动画结束后的爆炸效果，当时的想法是：
1.帧动画，UI给每帧的图，抛物线动画结束后，隐藏或者重置ImageView，启动帧动画；
2.自定义ImageView，抛物线动画后，分割该View成若干小的childView，各childView再次执行抛物线动画；
3.自定义ImageView和BoomView(若干爆炸小球)，图片只负责抛物线运动，小球只负责自身的爆炸运动，实现图片和小球之间的低耦合。
简单的分析一下：
帧动画的弊端很明显，不同的商品颜色缤纷多彩，而帧动画仅能实现同一套图片之间的切换，体验太差了。
分割ImageView的做法效率很低（分割个数很多的情况下），个人也没有找到很好的分割策略，所以舍弃
自定义ParabolaView（图片）和BoomView（小球），各自分工，降低耦合性。
三、编码分析
1.自定义ParabolaView实现图片抛物线运动：
利用贝塞尔曲线路径，通过值动画，不断改变ParabolaView的坐标，核心计算公式如下：
/**
* mStart_X:起始X坐标
* mStart_Y:起始Y坐标
* mEnd_X:终点X坐标
* mEnd_Y:终点Y坐标
* mControl_X:控制点X坐标
* mControl_Y:控制点Y坐标
* mAnimValue:值动画及时值
*/
public void setXY() {
this.setX((1 - mAnimValue) * (1 - mAnimValue) * mStart_X + 2 * mAnimValue * (1 - mAnimValue) *
mControl_X + mAnimValue * mAnimValue * mEnd_X);
this.setY((1 - mAnimValue) * (1 - mAnimValue) * mStart_Y + 2 * mAnimValue * (1 - mAnimValue) *
mControl_Y + mAnimValue * mAnimValue * mEnd_Y);
}
2.初始化小球:
初始化小球数量ballCount，小球的颜色根据图片上的颜色进行随机获取，这样可以保证不同的商品爆炸的小球是不同的颜色
public void createBalls() {
if (ballList != null) {
ballList.clear();
}
for (int i = 0; i < ballCount; i++) {
ballList.add(new LittleBall(mEnd_X, mEnd_Y, mWidth, mHeight, mBallPaint,
mBitmap.getPixel(Utils.randomIntPositive(mBitmap.getWidth() - 1, 0),
Utils.randomIntPositive(mBitmap.getHeight() - 1, 0))));
Log.d("xandone", mEnd_X + " " + mEnd_Y + " " + mWidth + " " + mHeight );
}
}
3.单个小球的初始化，新建小球类LittleBall，构造：
public LittleBall(int endX, int endY, int w, int h, Paint paint, int color) {
this.mView_endX = endX;
this.mView_endY = endY;
this.mView_w = w;
this.mView_h = h;
this.mPaint = paint;
this.mColor = color;
init();
}
根据ParabolaView传递过来的的宽高和颜色进行计算ball的起始位置和控制点，核心计算：
public void init() {
this.mStart_X = Utils.randomIntPositive(mView_endX + mView_w, mView_endX);
this.mStart_Y = Utils.randomIntPositive(mView_endY + mView_h, mView_endY);
this.mEnd_X = Utils.randomIntPositive(mView_endX + mView_w, mView_endX - mView_w);
this.mEnd_Y = mView_endY + mView_h;
this.mRadius = Utils.randomIntPositive(12, 4);
mControl_X = (mStart_X + mEnd_X) / 2;
mControl_Y = mStart_Y - 300;
}
4.多个小球的爆炸BoomView:
这里就比较简单了，和之前的抛物线动画思路一样
public void drawBall(Canvas canvas) {
if (null == ballList || ballList.size() <= 0) {
return;
}
for (int i = 0; i < ballList.size(); i++) {
ballList.get(i).drawBall(canvas);
if (mAnimValue != 0) {
ballList.get(i).setXY(mAnimValue);
this.setAlpha(1 - mAnimValue);
}
}
}
5.ParabolaView和BoomView之间的通讯：
因为要根据商品图片传递小球颜色和个数，所以避免不了它们之间的通讯，解决策略是通过当前Activity为桥梁进行传递数据，Activity实现ParabolaView中的接口AnimEndInterface并重写:
@Override
public void onDrawBall(List<LittleBall> littleBalls) {
boomView.startAnim(littleBalls);
}
四、用法简介（栗子）：
ParabolaView和BoomView放在同一个布局之中，设置OnTouchListener事件，将手指点击处作为终点坐标传入，开启动画效果。
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
parabolaView.startAnim((int) event.getX(), (int) event.getY());
}
return true;
}
当前Activity必须实现ParabolaView中的AnimEndInterface接口(已改)
Activity实现AnimEndInterface太过于局限，更改成聚合的设计模式，适用于Activity/ViewGroup/Dialog等..
@Override
public void onDrawBall(List<LittleBall> littleBalls) {
boomView.startAnim(littleBalls);
五、遗留问题
配置文件attrs等相关细节懒得去做了，有时间再搞..
六、源码地址：
自定义View-抛物线爆炸
