图片预览
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