自定义view之烟花效果

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

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


untitled.gif

1.分析案例

1.1 是用自定义View,还是自定义ViewGroup?

如果用自定义ViewGroup,那么每个粒子都是一个view,并且每一帧的动画都要走onMeasure()和onLayout(),但如果是自定义View的话,每一帧动画的话,我只需要重新在onDraw()里绘制一下就可以了,相比之下,自定义view更符合各方要求,所以这里用的是自定义view来实现的

1.2 动画拆分

烟花爆竹效果可以分解成两部分动画:

  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的计算问题

你可能感兴趣的:(自定义view之烟花效果)