QQ健康水滴形加载

绘制效果

为了区分过程，我将每个过程用不同的颜色给出。

demo.gif

绘制思路

暂略，有空补！

完整绘制代码

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    canvas.drawColor(Color.WHITE);

    //设置画笔颜色和样式
    mPaint.setColor(0xFFDEE0DD);
    mPaint.setStyle(Paint.Style.FILL);
    //绘制圆
    canvas.drawCircle(pointerX, pointerY, mRaduis, mPaint);
    //绘制顶部三角形
    mPath.moveTo(mTriangleX1, mTriangleY1);
    mPath.lineTo(mTriangleX2, mTriangleY2);
    mPath.lineTo(mTriangleX3, mTriangleY3);
    //lineto起点
    mPath.close();
    mPaint.setColor(Color.GREEN);           //test
    canvas.drawPath(mPath, mPaint);

    //修改画笔颜色
    mPaint.setColor(0xFF13B5E8);
    startAngle -= 5;
    sweepAngle += 10;

    if (sweepAngle < 310) {
        canvas.drawArc(progressRectF, startAngle, sweepAngle, false, mPaint);
        //100毫秒后重绘
        postInvalidateDelayed(100);
    } else {
        canvas.drawArc(progressRectF, -90, 360, false, mPaint);

        trianglePath1.moveTo(mTriangleX1, (float) (mTriangleY1 + mRaduis * Math.sin(Math.PI / 3) / 3));
        trianglePath1.lineTo(mTriangleX2 + 2 * (mRaduis / 2 - triangleR / 2), mTriangleY2 + mRaduis / 2 - triangleR / 2);
        trianglePath1.lineTo(mTriangleX3 - 2 * (mRaduis / 2 - triangleR / 2), mTriangleY3 + mRaduis / 2 - triangleR / 2);
        trianglePath1.close();
        mPaint.setColor(Color.RED);         //test
        canvas.drawPath(trianglePath1, mPaint);

        startAngle = 90;
        sweepAngle = 0;
        triangleHeight = 0;
        //500毫秒后重绘
        postInvalidateDelayed(500);
    }
}

参考资料

• 自定义View实战（二）QQ健康水滴形加载