一、最近在写商城方面的业务,需求在商品加如购物车过程中,实现一个抛物线加入的动画。
先看我写的效果图:
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 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 littleBalls) {
boomView.startAnim(littleBalls);
五、遗留问题
配置文件attrs等相关细节懒得去做了,有时间再搞..
六、源码地址:
自定义View-抛物线爆炸