自定义view之烟花效果

想谈一谈职业发展。上大学的时候，有一门职业规划的课程，甚至某个学部还组织了《大学生职业规划》的比赛，我记得有一次和一个哥们走在校园里，看到《规划》的海报，跟我旁边的哥们吐槽了他们举办《规划》是没有意义的话。现在回想起来，以前的自己之所以说职业规划无意义，是因为那时还是个学生，职业规划离自己还比较的遥远。现如今，我的看法是：职业规划非常重要，如果把人的一生比作是一场战争的话，那么职业规划就是这场战争中的战术，一个好的战术，可以以少胜多，出其不意；如果把人的一生比作一个软件的话，那么职业规划就是这个软件的架构，好的架构，不会牵一发而动全身。所以我认为职业规划很重要！

本篇文章主要是分享在做项目时的烟花效果的实现方式，废话不多说，先看看我们产品需要的效果：

untitled.gif

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.单个粒子的绘制

1591504933(1).jpg

可以理解为一个圆弧 + 三角形的组合

绘制圆弧

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.爆炸阶段

1591505084(1).jpg

这个阶段主要是涉及到的数学知识，我采用了转动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的计算问题