高仿百度加载图片自定义控件

最新推荐文章于 2019-08-27 19:37:30 发布

唐志杰

最新推荐文章于 2019-08-27 19:37:30 发布

阅读量506

点赞数 1

分类专栏： Android

本文链接：https://blog.csdn.net/u013155862/article/details/50601378

版权

Android 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

高仿百度加载图片自定义控件，利用绘制和属性动画

效果如下

代码如下：

public class TriangleWithCircleView extends View {

    /**
     * 三角形画笔
     */
    private Paint trianglePaint;

    /**
     * 圆的画笔
     */
    private Paint circlePaint;

    /**
     * 最大三角形的
     */
    private final int MAX_BORDER = 50;

    /**
     * 最小三角形
     */
    private final int MIN_BORDER = 20;

    /**
     * 当前最小三角形
     */
    private int currentMinBorder;

    /**
     * 当前最大三角形
     */
    private int currentMaxBorder;

    /**
     * 缩放动画的速率
     */
    private final int STEP = 1;

    /**
     * 当前的三角形
     */
    private int currentBorderLength;

    /**
     * 是否是缩小
     */
    private boolean isDown = true;

    /**
     * 三个圆的半径
     */
    private final int CIRCLE_1 = 8;
    private final int CIRCLE_2 = 12;
    private final int CIRCLE_3 = 16;

    public TriangleWithCircleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(150, 150);
    }

    /**
     * 初始化
     */
    private void init() {
        trianglePaint = new Paint();
        trianglePaint.setColor(Color.BLUE);
        trianglePaint.setStrokeWidth(2);
        trianglePaint.setStyle(Paint.Style.STROKE);
        trianglePaint.setAntiAlias(true);

        circlePaint = new Paint();
        circlePaint.setColor(Color.BLUE);
        circlePaint.setStyle(Paint.Style.FILL);
        circlePaint.setAntiAlias(true);

        startRotation();
        currentBorderLength = MAX_BORDER;
        currentMinBorder = MIN_BORDER;
        currentMaxBorder = MAX_BORDER;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制三角形
        Path path = new Path();
        float gen3 = (float) Math.sqrt(3);
        float offset = getHeight() / 2 - currentBorderLength;

        //三角形上点的坐标
        float topX = getWidth() / 2;
        float topY = offset;

        //三角形左点的坐标
        float leftX = getWidth() / 2 - (gen3 / 2 * currentBorderLength);
        float leftY = getHeight() / 2 + currentBorderLength / 2;

        //三角形右点的坐标
        float rightX = getWidth() / 2 + (gen3 / 2 * currentBorderLength);
        float rightY = getHeight() / 2 + currentBorderLength / 2 - 10;

        path.moveTo(topX, topY);//上
        path.lineTo(leftX, leftY);//左
        path.lineTo(rightX, rightY);//右
        path.lineTo(topX, topY);
        path.close();
        canvas.drawPath(path, trianglePaint);

        //根据三角形的三个角绘制三个圆
        canvas.drawCircle(topX, topY, CIRCLE_1, circlePaint);
        canvas.drawCircle(leftX, leftY, CIRCLE_2, circlePaint);
        canvas.drawCircle(rightX, rightY, CIRCLE_3, circlePaint);

        if (isDown) {//当前状态为缩小
            currentBorderLength -= STEP;
        } else {//当前状态为放大
            currentBorderLength += STEP;
        }

        //判断是否缩小到最小的
        if (currentBorderLength <= currentMinBorder) {
            //减少下次能放大的最大值
            currentMaxBorder -= 10;
            if (currentMaxBorder <= MAX_BORDER - 20) {
                currentMaxBorder = MAX_BORDER;
            }
            isDown = false;
        }
        if (currentBorderLength >= currentMaxBorder) {
            //增大下次能缩小的最小值
            currentMinBorder += 15;
            if (currentMinBorder >= MIN_BORDER - 10) {
                currentMinBorder = MIN_BORDER;
            }
            isDown = true;
        }
        invalidate();
    }

    /**
     * 开始旋转
     */
    private void startRotation() {
        ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(this, "rotation", 0, 360);
        objectAnimator.setDuration(2400);
        objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
        objectAnimator.setInterpolator(new LinearInterpolator());
        objectAnimator.start();
    }
}