自定义View实战之仿土豆Loading实现

图片预览

1. 分析

1. 画上面两个小圆点 （眼睛）
2. 画下面半个圆环
3. 动画处理

2. 实现原理

1. 绘制小圆点 绘制辅助坐标系 
2. 绘制半个圆环
3. loading转动过程动画处理
4. 角度计算

3. 初始化一些东西

   private void initPaint() {
    //画圆环
    mPaint = new Paint();
    mPaint.setColor(ContextCompat.getColor(getContext(),R.color.colorGreen));
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(dp2px(8));
    mPaint.setAntiAlias(true);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mRectF = new RectF();

    //画坐标轴
    mLinePaint = new Paint();
    mLinePaint.setColor(Color.GRAY);
    mLinePaint.setStyle(Paint.Style.STROKE);
    mLinePaint.setStrokeWidth(3);
    mLinePaint.setAntiAlias(true);

    //画点
    mPonitPaint = new Paint();
    mPonitPaint.setColor(ContextCompat.getColor(getContext(),R.color.colorBlack));
    mPonitPaint.setStyle(Paint.Style.STROKE);
    mPonitPaint.setStrokeCap(Paint.Cap.ROUND);
    mPonitPaint.setStrokeWidth(10);
    mPonitPaint.setAntiAlias(true);
}

4. 绘制笑脸圆环 根据动画过程计算角度

//画笑脸 画圆环
private void drawCircleRing(Canvas canvas) {

    float radius = dp2px(21);
    float left = -radius;
    float top = -radius;
    float right = radius;
    float bottom = radius;
    mRectF.set(left,top,right,bottom);

    canvas.save();
    // rotate
    if (animatedValue>= 135){
        canvas.rotate(animatedValue-135);
    }

    // draw mouth
    float startAngle=0, sweepAngle=0;

    if (animatedValue < 135){
        startAngle = animatedValue + 5;
        sweepAngle = 170 + animatedValue/ 3;
    }else if (animatedValue< 270){
        startAngle = 135 + 5;
        sweepAngle = 170 + animatedValue/ 3;
    }else if (animatedValue< 630){
        startAngle = 135 + 5;
        sweepAngle = 260-(animatedValue-270)/5;
    }else if (animatedValue< 720){
        startAngle = 135-(animatedValue-630)/2 + 5;
        sweepAngle = 260-(animatedValue-270)/5;
    }else{
        startAngle = 135- (animatedValue- 630) / 2 - (animatedValue-720) / 6 +5;
        sweepAngle = 170;
    }

    //画圆弧
    canvas.drawArc(mRectF,startAngle,sweepAngle,false,mPaint);

    float pointY = -radius + dp2px(6);
    float ponitX = radius - dp2px(6);
    //笑脸右边的点
    canvas.drawPoint(ponitX,pointY,mPaint);
    //笑脸左边的点
    canvas.drawPoint(-ponitX,pointY,mPaint);

    canvas.restore();

}

5. 动画处理

//添加动画
public void playAnimation(){
    if (animator !=null && animator.isRunning()){
        animator.cancel();
        animator.start();
    }else {
        animator = ValueAnimator.ofFloat(0,855).setDuration(DURATION);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                animatedValue = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.start();
    }
}

6. 项目源代码下载

后面统一提供下载地址

7. 联系方式

QQ:1509815887