教你手撸一个高仿PostMan加载效果

查看原文

其他

教你手撸一个高仿PostMan加载效果

原创 2017-07-26 BraveJoy 终端研发部

前言介绍

手把手教你做一个高仿PostMan加载效果

BraveJoy的博客地址：
http://www.jianshu.com/p/c1e17e52e113

正文

不知道大家有没有使用过PostMan来调试接口，刚打开postman的时候有有一个加载效果，觉得还不错也不难，于是就趁着今天有时间练了一把手。来看看效果图吧！

这个效果很简单，只要canvas的drawCircle方法和一个属性动画的知识即可完成。照例先放个GitHub传送门：PostManLoading

总体思路

画圆，最里面的实心圆；
再画圆，外面的三条空心圆；
画三个移动的小球。

既然是练手项目，在项目中也不大可能会用到，我就不写的那么详细了~ 由于我们要做的是一个方形区域的效果，所以重写onMeasure方法把宽高重置为相等，这个不多说了。

1.画圆，最里面的实心圆

首先呢，先定义一个半径和空心圆之间的间隔，和初始化一些画笔的操作

private Paint mPaintCircle;private Paint mPaintPoint;private int mRandius = 40;private int mInterval = 50;//空心圆之间的间隔//初始化操作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);

然后要干嘛来着~，画圆呀！

int centerX = getWidth() / 2;
int centerY = getHeight() / 2;//绘制实心圆
canvas.drawCircle(centerX, centerY, mRandius, mPaintPoint);

2.再画圆，外面的三条空心圆

//绘制空心圆，我们以相等的间隔来依次画出
canvas.drawCircle(centerX, centerY, mRandius + mInterval, mPaintCircle);
canvas.drawCircle(centerX, centerY, mRandius + mInterval + mInterval, mPaintCircle);
canvas.drawCircle(centerX, centerY, mRandius + mInterval + mInterval + mInterval, mPaintCircle);

3.画三个移动的小球

这里是此次博客的核心~ 首先，我们分析滚动小球的圆心是在空心圆的轨迹上不停地变化着，但是半径不变，我们暂且定为20个像素。只要我们在属性动画中不停地获取空心圆上轨迹的每一个坐标点然后赋值给小球就可以了。开始了~我们先定义圆心坐标：

//第一个小圆圆心坐标private float X1;private float Y1;//第二个小圆圆心坐标
private float X2;private float Y2;//第三个小圆圆心坐标
private float X3;private float Y3;

然后开始写绘制代码，至于代码中的坐标为什么要加centerX 和centerY 这个等你看完就知道了，别急~ //绘制滚动的小圆球

canvas.drawCircle(centerX + X1, centerY + Y1, 20, mPaintPoint);
canvas.drawCircle(centerX + X2, centerY + Y2, 20, mPaintPoint);
canvas.drawCircle(centerX + X3, centerY + Y3, 20, mPaintPoint);

那么我们如何来获取空心圆上的每一个点的坐标呢？不如画个草图吧~

看图，我们要求的就是小红球的圆心坐标也就是空心圆的轨迹上的每一点的坐标值。 deg是对应整个PostManLoadingView的中心的角度值，这个是从0~360°时刻变化着的，既然知道角度，大的空心圆半径R也是已知，那么要求途中的X和Y值就很简单了，一个三角函数就可以：

好的，到了这里应该就有人会想到用Math类来求正弦函数和余弦函数了但是Math.sin(rad)和Math.cos(rad)方法中需要传入的参数是指弧度rad而不是角度deg，所以这里需要把角度值转化成弧度制再调用Math函数。这里再放一个转化公式具体详细的解释请看Android角度与弧度

接下来就容易了~ 到了这里再来看我们上面留的那个问题就知道为什么了~求出X之后，那么小红球圆心坐标最终的X值是多少呢？很明显就是centerX +X。好的，继续往下走开始撸代码！这里我用一个属性动画ValueAnimator传入0-360代表角度，进而求出每一个度数时的X值和Y值，不说了，看代码

ValueAnimator animator = ValueAnimator.ofFloat(0, 360);animator.setDuration(mRandius * 30);animator.setRepeatCount(ValueAnimator.INFINITE);animator.setRepeatMode(ValueAnimator.RESTART);animator.setInterpolator(new LinearInterpolator());

然后去监听这个动画获取每一个角度值~

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));
    }
});

好的，到了这里基本上就没有什么东西了，由于考虑到三个小球转动的速度不一样，所以我们就把每隔小球所执行动画的时间设置不一样就可以了~，好的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()方法就可以了~

demo下载地址：
https://github.com/SuperKotlin/PostManLoading

博客地址:

http://www.jianshu.com/p/c1e17e52e113

终端研发部提倡：没有做不到的，只有想不到的。

在这里获得的不仅仅是技术！

让心，在阳光下学会舞蹈

让灵魂，在痛苦中学会微笑

—终端研发部—

如果你觉得此文对您有所帮助，欢迎入群 QQ交流群：232203809

微信公众号：终端研发部

这里学到的不仅仅

100 28962 100 28962 0 0 7896 0 0:00:03 0:00:03 --:--:-- 7895 * Connection #0 to host 37.48.118.90 left intact

一把短刀，怎么就让他连捅18人？！

黄晓菁，这位杭州泰隆银行女员工自爆视频火了，带给我们那些思考？

这一刻，快乐被具象化了

海南省拟任干部人选公

女高管与男下属上班约会开房，男方妻子闹到单位！被开除后她辩称：一直保持0.46-1.22米“个人距离”