一个很有意思的自定义loading动画

这就是张图片

本文原创，不能匿名转载

这次这个自定义loading还是有点意思，先看看效果图：

在十多秒的时候有点错乱，因为我只录了那么久

1.直接上代码（HopLoadingView）

package com.hadisi.hoploading;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

/**
 * Created by hadisi5216 on 2016/8/25.
 */

public class HopLoadingView extends View {
    private Paint mPaint;

    private int widthSpecSize;
    private int heightSpecSize;
    private int radius = 20;//小圆球半径
    private int HLength = 100;//六边形半径
    private int maxMoveH = 60;//向外移送最长距离
    private double moveH = 0;//向外移动增量
    private int theCircle = -1;//那个圆球在作用

    private ValueAnimator animator;

    public HopLoadingView(Context context) {
        super(context);
        mPaint = new Paint();
    }

    public HopLoadingView(Context context, AttributeSet attrs) {
        super(context, attrs);

    }

    public HopLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(0xFFE6413A);
        mPaint.setAntiAlias(true);
        for (int i = 1; i <= 6; i++) {
            if (theCircle % 6 + 1 == i)
                canvas.drawCircle(widthSpecSize / 2 + (float) (Math.cos(Math.PI * i / 3) * (HLength + moveH)), heightSpecSize / 2 - (float) (Math.sin(Math.PI * i / 3) * (HLength + moveH)), radius, mPaint);
            else
                canvas.drawCircle(widthSpecSize / 2 + (float) Math.cos(Math.PI * i / 3) * HLength, heightSpecSize / 2 - (float) Math.sin(Math.PI * i / 3) * HLength, radius, mPaint);
        }
    }

    public void start() {
        if (animator != null)
            animator.cancel();
        animator = ValueAnimator.ofFloat(0f, (float) Math.PI * 6);
        animator.setDuration(3000);
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setInterpolator(new LinearInterpolator());
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                moveH = Math.abs(Math.sin((Float) animation.getAnimatedValue())) * maxMoveH;
                theCircle = (int) ((Float) animation.getAnimatedValue() / Math.PI) + 1;
                nvalidate();
            }
        });
        animator.start();
    }
}

2.聊聊我的思路

1、画出那六个小圆；
2、让小圆做向外移动然后移回来的动画；
3、让六个小圆依次循环动画。

1.画出那六个小圆

图画的真丑

看上图，六个小圆分别在六边形的六个顶点，我们定义六边形的中心点为该控件的中心点(widthSpecSize / 2,heightSpecSize / 2)，则图中那个小圆的坐标为(widthSpecSize / 2 + (float) Math.cos(Math.PI * i / 3) * HLength, heightSpecSize / 2 - (float) Math.sin(Math.PI * i / 3) * HLength)。其他几个小圆的坐标只要改变为对应的角度即可，如下代码可以轻松画出六个小圆：

for (int i = 1; i <= 6; i++) {
    canvas.drawCircle(widthSpecSize / 2 + (float) Math.cos(Math.PI * i / 3) * HLength, heightSpecSize / 2 - (float) Math.sin(Math.PI * i / 3) * HLength, radius, mPaint);
}

2.让小圆做向外移动然后移回来的动画
还是看上面那个图，可以通过改变HLength的值来完成向外移动然后移回来的动画；还有动画的轨迹有点正弦曲线的意思，严格来说应该是y=|sinx|函数对应的曲线。看下图随着x的不断变化，y的值在0和1之间变化。

y=|sinx|函数

可以使用属性动画，让ValueAnimator对象的变化范围为(0f, (float) Math.PI)，匀速循环播放

animator = ValueAnimator.ofFloat(0f, (float) Math.PI);
animator.setDuration(3000);
animator.setRepeatMode(ValueAnimator.RESTART);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setInterpolator(new LinearInterpolator());

再定义一个向外移动的增量moveH，那么它的值应该是下面，其中maxMoveH为它能移动的最大距离

moveH = Math.abs(Math.sin((Float) animation.getAnimatedValue())) * maxMoveH;

对应的小圆的draw应该为

canvas.drawCircle(widthSpecSize / 2 + (float) (Math.cos(Math.PI / 3) * (HLength + moveH)), heightSpecSize / 2 - (float) (Math.sin(Math.PI / 3) * (HLength + moveH)), radius, mPaint);

3.让六个小圆依次循环动画
定义一个变量theCircle标记那个小圆在运动，让ValueAnimator对象的变化范围为(0f, (float) Math.PI * 6)，则

theCircle = (int) ((Float) animation.getAnimatedValue() / Math.PI) + 1;

这样theCircle的值会ValueAnimator对象的变化在1，2，3，4，5，6之间循环，此时画小圆的方法变为

for (int i = 1; i <= 6; i++) {
    if (theCircle % 6 + 1 == i)
        canvas.drawCircle(widthSpecSize / 2 + (float) (Math.cos(Math.PI * i / 3) * (HLength + moveH)), heightSpecSize / 2 - (float) (Math.sin(Math.PI * i / 3) * (HLength + moveH)), radius, mPaint);
    else
        canvas.drawCircle(widthSpecSize / 2 + (float) Math.cos(Math.PI * i / 3) * HLength, heightSpecSize / 2 - (float) Math.sin(Math.PI * i / 3) * HLength, radius, mPaint);
}

总结：再复杂的需求，分解为N个独立的小需求，一个个干掉它，它就没那么复杂了。喜欢您就戳下下面的喜欢！