自定义View_仿PostMan加载效果

发表于:2018-1-03 10:08

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:BraveJoy    来源:简书

分享:
  好的,到了这里基本上就没有什么东西了,由于考虑到三个小球转动的速度不一样,所以我们就把每隔小球所执行动画的时间设置不一样就可以了~,好的Over!
下面上全家福~
PostManLoadingView.java
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
/**
* Created by zhuyong on 2017/7/20.
*/
public class PostManLoadingView extends View {
private Paint mPaintCircle;
private Paint mPaintPoint;
private int mRandius = 40;
private int mInterval = 50;//空心圆之间的间隔
//第一个小圆圆心坐标
private float X1;
private float Y1;
//第二个小圆圆心坐标
private float X2;
private float Y2;
//第三个小圆圆心坐标
private float X3;
private float Y3;
public PostManLoadingView(Context context) {
this(context, null);
}
public PostManLoadingView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public PostManLoadingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mPaintCircle = new Paint();
mPaintCircle.setAntiAlias(true);
mPaintCircle.setStyle(Paint.Style.STROKE);
mPaintCircle.setStrokeWidth(3);
mPaintCircle.setColor(Color.RED);
mPaintPoint = new Paint();
mPaintPoint.setAntiAlias(true);
mPaintPoint.setStyle(Paint.Style.FILL);
mPaintPoint.setColor(Color.RED);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int mWidth = MeasureSpec.getSize(widthMeasureSpec);
setMeasuredDimension(mWidth, mWidth);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int centerX = getWidth() / 2;
int centerY = getHeight() / 2;
//绘制实心圆
canvas.drawCircle(centerX, centerY, mRandius, mPaintPoint);
//绘制空心圆
canvas.drawCircle(centerX, centerY, mRandius + mInterval, mPaintCircle);
canvas.drawCircle(centerX, centerY, mRandius + mInterval + mInterval, mPaintCircle);
canvas.drawCircle(centerX, centerY, mRandius + mInterval + mInterval + mInterval, mPaintCircle);
//绘制滚动的小圆球
canvas.drawCircle(centerX + X1, centerY + Y1, 20, mPaintPoint);
canvas.drawCircle(centerX + X2, centerY + Y2, 20, mPaintPoint);
canvas.drawCircle(centerX + X3, centerY + Y3, 20, mPaintPoint);
}
public void start() {
ValueAnimator animator1 = getValueAnimator(mRandius + mInterval);
animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float deg = (float) valueAnimator.getAnimatedValue();
float rad = (float) (Math.PI * deg / 180);
Y1 = (float) (Math.sin(rad) * (mRandius + mInterval));
X1 = (float) (Math.cos(rad) * (mRandius + mInterval));
}
});
animator1.start();
ValueAnimator animator2 = getValueAnimator(mRandius + mInterval + mInterval);
animator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float deg = (float) valueAnimator.getAnimatedValue();
float rad = (float) (Math.PI * deg / 180);
Y2 = (float) (Math.sin(rad) * (mRandius + mInterval + mInterval));
X2 = (float) (Math.cos(rad) * (mRandius + mInterval + mInterval));
}
});
animator2.start();
ValueAnimator animator3 = getValueAnimator(mRandius + mInterval + mInterval + mInterval);
animator3.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
float deg = (float) valueAnimator.getAnimatedValue();
float rad = (float) (Math.PI * deg / 180);
Y3 = (float) (Math.sin(rad) * (mRandius + mInterval + mInterval + mInterval));
X3 = (float) (Math.cos(rad) * (mRandius + mInterval + mInterval + mInterval));
invalidate();
}
});
animator3.start();
}
public ValueAnimator getValueAnimator(final int mRandius) {
ValueAnimator animator = ValueAnimator.ofFloat(0, 360);
animator.setDuration(mRandius * 30);//这里动画时间只是随便写的,可以自己设置
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setRepeatMode(ValueAnimator.RESTART);
animator.setInterpolator(new LinearInterpolator());
return animator;
}
}
  xml布局和Activity很简单我就不放了,最后只要调start()方法就可以了~

上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
22/2<12
重磅发布,2022软件测试行业现状调查报告~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计

法律顾问:上海漕溪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2023
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号