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;//向外移送最長(zhǎng)距離
    private double moveH = 0;//向外移動(dòng)增量
    private int theCircle = -1;//那個(gè)圓球在作用

    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、畫出那六個(gè)小圓；
2、讓小圓做向外移動(dòng)然后移回來(lái)的動(dòng)畫；
3、讓六個(gè)小圓依次循環(huán)動(dòng)畫。

1.畫出那六個(gè)小圓

圖畫的真丑

看上圖泳赋，六個(gè)小圓分別在六邊形的六個(gè)頂點(diǎn)衅鹿，我們定義六邊形的中心點(diǎn)為該控件的中心點(diǎn)(widthSpecSize / 2,heightSpecSize / 2)，則圖中那個(gè)小圓的坐標(biāo)為(widthSpecSize / 2 + (float) Math.cos(Math.PI * i / 3) * HLength, heightSpecSize / 2 - (float) Math.sin(Math.PI * i / 3) * HLength)。其他幾個(gè)小圓的坐標(biāo)只要改變?yōu)閷?duì)應(yīng)的角度即可，如下代碼可以輕松畫出六個(gè)小圓：

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.讓小圓做向外移動(dòng)然后移回來(lái)的動(dòng)畫
還是看上面那個(gè)圖捷犹，可以通過(guò)改變HLength的值來(lái)完成向外移動(dòng)然后移回來(lái)的動(dòng)畫枪孩；還有動(dòng)畫的軌跡有點(diǎn)正弦曲線的意思，嚴(yán)格來(lái)說(shuō)應(yīng)該是y=|sinx|函數(shù)對(duì)應(yīng)的曲線』僬祝看下圖隨著x的不斷變化茎芭，y的值在0和1之間變化趁仙。

y=|sinx|函數(shù)

可以使用屬性動(dòng)畫，讓ValueAnimator對(duì)象的變化范圍為(0f, (float) Math.PI)，勻速循環(huán)播放

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

再定義一個(gè)向外移動(dòng)的增量moveH，那么它的值應(yīng)該是下面旭蠕，其中maxMoveH為它能移動(dòng)的最大距離

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

對(duì)應(yīng)的小圓的draw應(yīng)該為

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.讓六個(gè)小圓依次循環(huán)動(dòng)畫
定義一個(gè)變量theCircle標(biāo)記那個(gè)小圓在運(yùn)動(dòng)捆蜀，讓ValueAnimator對(duì)象的變化范圍為(0f, (float) Math.PI * 6)呢蔫，則

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

這樣theCircle的值會(huì)ValueAnimator對(duì)象的變化在1，2卷胯，3，4狭姨，5暖眼，6之間循環(huán)司澎，此時(shí)畫小圓的方法變?yōu)?/p>

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

總結(jié)：再?gòu)?fù)雜的需求，分解為N個(gè)獨(dú)立的小需求，一個(gè)個(gè)干掉它杠步，它就沒(méi)那么復(fù)雜了泣刹。喜歡您就戳下下面的喜歡！