boom.gif

思路

主要步驟就是上升和爆炸。都是用屬性動畫實現的。使用屬性動畫的時候，該屬性必須要有set和get方法。

 ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(boomView, "flyFraction", 0, 1);
        objectAnimator.setDuration(700);

        objectAnimator.setInterpolator(new DecelerateInterpolator());
        ObjectAnimator objectAnimator1 = ObjectAnimator.ofFloat(boomView, "boomFraction", 0, 1);
        objectAnimator1.setDuration(400);

        final AnimatorSet set = new AnimatorSet();
        set.playSequentially(objectAnimator, objectAnimator1);

        boomView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                set.start();

            }
        });

        set.addListener(new AnimatorListenerAdapter() {

            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                //改變顏色
                color = Color.argb(255, random.nextInt(255), random.nextInt(255), random.nextInt(255));
                boomView.setColor(color);
                DrawableCompat.setTint(imageView.getDrawable(),color);

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                //循環播放
                set.start();
            }
        });

上升過程

上升過程用canvas畫一個矩形，從0-3/4高度。

if(flyFraction!=1){
            int y = (int) ((1 - flyFraction * 3 / 4) * canvas.getHeight());
            mPaint.setColor(color);
            canvas.drawRect(canvas.getWidth() / 2 - 5, y, canvas.getWidth() / 2 + 5, y + 10, mPaint);
        }

爆炸過程

爆炸粒子的圍繞半徑逐漸變大。（使用極坐標可以很容易地在畫小圓點）

public class BoomUtil {

    private Paint mPaint;
    private int pointCount;//爆炸時的粒子數量
    private int radiusMax;//最大爆炸半徑
    private int pointRadius;//粒子半徑


    public BoomUtil(int pointCount, int radiusMax, int pointRadius) {
        this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        this.pointCount = pointCount;
        this.radiusMax = radiusMax;
        this.pointRadius = pointRadius;
    }

    public void drawBoom(Canvas canvas, int cx,int cy,float fraction,int color) {
        mPaint.setColor(color);
        mPaint.setAlpha((int) (255 * (1 - fraction)));
        int radius = (int) (radiusMax * fraction);
        for (int i = 0; i < pointCount; i++) {
            double angle = i * 2 * Math.PI / pointCount;
            float x = (float) Math.cos(angle) * radius+cx;
            float y = (float) Math.sin(angle) * radius+cy;
            canvas.drawCircle(x, y, pointRadius, mPaint);
        }
    }
}

BoomView

public class BoomView extends View {

    Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private float flyFraction = 0;
    private float boomFraction = 0;
    private BoomUtil boomUtil;
    private Random random;
    private int color;

    public int getColor() {
        return color;
    }

    public void setColor(int color) {
        this.color = color;
    }

    public BoomView(Context context) {
        super(context);
        initBoomUtil();
    }

    public BoomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initBoomUtil();
    }

    private void initBoomUtil() {
        boomUtil = new BoomUtil(12, 200, 12);

    }

    public float getBoomFraction() {
        return boomFraction;
    }

    public void setBoomFraction(float boomFraction) {
        this.boomFraction = boomFraction;
        invalidate();
    }

    public float getFlyFraction() {
        return flyFraction;
    }

    public void setFlyFraction(float flyFraction) {
        this.flyFraction = flyFraction;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(flyFraction!=1){
            int y = (int) ((1 - flyFraction * 3 / 4) * canvas.getHeight());
            mPaint.setColor(color);
            canvas.drawRect(canvas.getWidth() / 2 - 5, y, canvas.getWidth() / 2 + 5, y + 10, mPaint);
        }

        if (boomFraction != 0) {
            boomUtil.drawBoom(canvas, canvas.getWidth() / 2, canvas.getHeight() / 4, boomFraction, color);
        }
    }
}

總結

把一個復雜的過程分解為多個簡單的過程，思路瞬間清晰了。
github源碼