想谈一谈职业发展。上大学的时候,有一门职业规划的课程,甚至某个学部还组织了《大学生职业规划》的比赛,我记得有一次和一个哥们走在校园里,看到《规划》的海报,跟我旁边的哥们吐槽了他们举办《规划》是没有意义的话。现在回想起来,以前的自己之所以说职业规划无意义,是因为那时还是个学生,职业规划离自己还比较的遥远。现如今,我的看法是:职业规划非常重要,如果把人的一生比作是一场战争的话,那么职业规划就是这场战争中的战术,一个好的战术,可以以少胜多,出其不意;如果把人的一生比作一个软件的话,那么职业规划就是这个软件的架构,好的架构,不会牵一发而动全身。所以我认为职业规划很重要!
本篇文章主要是分享在做项目时的烟花效果的实现方式,废话不多说,先看看我们产品需要的效果:
1.分析案例
1.1 是用自定义View,还是自定义ViewGroup?
如果用自定义ViewGroup,那么每个粒子都是一个view,并且每一帧的动画都要走onMeasure()和onLayout(),但如果是自定义View的话,每一帧动画的话,我只需要重新在onDraw()里绘制一下就可以了,相比之下,自定义view更符合各方要求,所以这里用的是自定义view来实现的
1.2 动画拆分
烟花爆竹效果可以分解成两部分动画:
- 上升阶段
- 爆炸阶段
1.3 动画怎么连贯起来
可通过时间流逝的百分比计算出某一时刻的位置,在调用invalidate()刷新下onDraw()方法,连贯起来就是一个动画了
public void startAnimator() {
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(this, "flyFractionx", 0, 1);
objectAnimator.setDuration(timeLauncher);
objectAnimator.setInterpolator(new DecelerateInterpolator());
ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(this, "boomFraction", 0, 1);
objectAnimator1.setDuration(boomLauncher);
final AnimatorSet set = new AnimatorSet();
set.playSequentially(objectAnimator, objectAnimator1);
set.start();
}
public float getBoomFraction() {
return boomFraction;
}
public void setBoomFraction(float boomFraction) {
this.boomFraction = boomFraction;
invalidate();
}
public float getFlyFractionx() {
return flyFraction;
}
public void setFlyFractionx(float flyFraction) {
this.flyFraction = flyFraction;
invalidate();
}
2.单个粒子的绘制
可以理解为一个圆弧 + 三角形的组合
绘制圆弧
rectF.set(r - arcMax, -arcMax, r + arcMax, arcMax);
path.arcTo(rectF, -90, 180);
绘制三角形时path.close()
path.lineTo((r - lengthMax) > 0 ? (r - lengthMax) : 0, 0);
path.close();
2.上升阶段
if(flyFraction!=1){
mLanPaint.setColor(color);
mLanPaint.setAlpha((int) (255 * (1 - flyFraction) / 2));
path.reset();
canvas.save();
canvas.translate(canvas.getWidth() / 2, canvas.getHeight());
canvas.rotate(diverge);
int r = (int) (radiusLauncher * flyFraction);
rectF.set(r - arcMax, -arcMax, r + arcMax, arcMax);
path.arcTo(rectF, -90, 180);
path.lineTo((r - lengthMax) > 0 ? (r - lengthMax) : 0, 0);
path.close();
canvas.drawPath(path, mLanPaint);
canvas.restore();
}
3.爆炸阶段
这个阶段主要是涉及到的数学知识,我采用了转动canvas的方式,即只要考虑半径问题,不用考虑角度问题
boom(canvas, (int) (canvas.getWidth() / 2 + radiusLauncher * Math.cos(angle)), (int) (canvas.getHeight() + radiusLauncher * Math.sin(angle)), boomFraction);
private void boom(Canvas canvas, int cx, int cy, float boomFraction) {
canvas.save();
mPaint.setAlpha(255);
if (boomFraction == 1.0f) {
mPaint.setAlpha(0);
} else {
mPaint.setAlpha((int) (255 * (1 - boomFraction / 2)));
}
int radius = (int) (radiusMax * boomFraction);//爆炸半径
if (radius < arcMax) return;
int arcRadius = (int) (arcMax * ARC_SCALE * boomFraction);//外层圆弧的半径
if (arcRadius >= arcMax) arcRadius = arcMax;//外层圆弧修正后的半径
canvas.translate(cx, cy);
float angle = 360 / pointCount;
for (int i = 0; i < pointCount; i++) {
path.reset();
rectF.set(radius - arcRadius, - arcRadius, radius + arcRadius, arcRadius);
path.arcTo(rectF, -90, 180);
path.lineTo((radius - lengthMax) > 0 ? (radius - lengthMax) : 0, 0);
path.close();
canvas.drawPath(path, mPaint);
canvas.rotate(angle);//旋转一个单位的角度
}
canvas.restore();
}
cx:爆炸点的x轴
cy:爆炸点的y轴
boomFraction:爆炸时间的流逝百分比
4.总结
实现这个效果的时候,将canvas(画布),path(用来绘制复杂的图形),paint(画笔)的知识温习了一遍,在做效果的时候,可能某一步计算出错了,由于思维定式的问题,找了很久才能找到问题,采用的极坐标的方式--转动canvas,很巧妙的解决了涉及到的sin cos的计算问题