自定义Loading大全之SwapLoading

　　那一月 我摇动所有的经筒 不为超度 只为触摸你的指尖
　　那一年 磕长头匍匐在山路 不为觐见 只为贴着你的温暖
　　那一世 转山转水转佛塔 不为修来生 只为途中与你相见
　　那一瞬，我飞升成仙，不为长生，只为佑你平安喜乐

概述

我们经常会看到一些很简单又非常耐看的Loading加载动画，它们又是怎么用代码实现出来的呢？通过代码实现简单的Loading动画可以帮助我们学到很多东西，尤其是一些算法的运用，任何事情都是从繁到简，日积夜累，正所谓你看得多了你知道的也就多了。。。

还是老规矩，上效果图：

源码请点击自定义LoadingView大全

今天的主角登场：

SwapLoading

开撸之前，我们来分析一下动画：

• 有5个小圆，编号 a,b,c,d,e a顺时针向后面运动到b的位置，同时b顺时针运动到a的位置，依次类推运动到e，e顺时针运动到a的同时a运动到e形成一个闭环。

需要注意的是：a运动到b的轨迹是半圆。最开始我就踩了一个坑，把轨迹想成了二阶贝塞尔曲线，一直纠结曲线公式，弄得我头都大了。后来灵感一闪，我傻啊，为啥不用圆形轨迹，哈哈一下我就豁然开朗啦。

分析一下，是不是很清晰，然后开撸。

前面的一些构造函数就初始化就不讲了，省略onMeasure，onSizeChanged方法。注意需要在onSizeChanged方法中处理padding属性。

先来看一张简单的草稿图，图画得不好，见谅。

我还是用 a,b,c,d,e来表示小球，a小球向上顺时针运动，轨迹所经过的圆弧为180~360：

 mRotationAngle = DEGREE_180 + mValueAnimator * DEGREE_180;

mValueAnimator表示属性动画的值（0.0f~1.0f）

b小球所经过的圆弧为0~180度：

 mRotationAngle = DEGREE_180 - mValueAnimator * DEGREE_180;

a,b小球所运动的半径为2小球之间的距离。那么我们简单的实现2个小球的运动轨迹。

需要注意从b运动到c，b所经过的弧度为180~0：

 mRotationAngle = DEGREE_180 - mValueAnimator * DEGREE_180;

c经过的弧度为0~-180度：

  mNextRotationAngle = -mValueAnimator * DEGREE_180;

依次类推可以实现a,b,c,d小球的运动动画，小球a到e就非常简单了，注意运动半径是2*小球间距。

我这里贴出onDraw和startAnimator方法代码，以供参考：

onDraw方法：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        mPaint.setColor(Color.WHITE);
        //绘制小球
        for (int i = 0; i < BALL_NUM; i++) {
            if (i == mCurrentBallIndex && i != BALL_NUM - 1) {
                if (isClockwiseRotation(i)) {
                    mRotationAngle = DEGREE_180 + mValueAnimator * DEGREE_180;
                    mNextRotationAngle = mValueAnimator * DEGREE_180;
                } else {
                    mRotationAngle = DEGREE_180 - mValueAnimator * DEGREE_180;
                    mNextRotationAngle = -mValueAnimator * DEGREE_180;
                }
            }

            if (i == mCurrentBallIndex) {
                mPaint.setStyle(Paint.Style.FILL_AND_STROKE);

                mRotationX = (float) (ballSpacing * BALL_SPACING_RADIUS * Math.cos(Math.toRadians(mRotationAngle)));
                mRotationY = (float) (ballSpacing * BALL_SPACING_RADIUS * Math.sin(Math.toRadians(mRotationAngle)));

                if (i == BALL_NUM - 1) {
                    getFirstAndLastAngle();
                    //最后一个小球
                    canvas.drawCircle((float) (centerX + 2 * ballSpacing * Math.cos(Math.toRadians(mNextRotationAngle))),
                            (float) (centerY + 2 * ballSpacing * Math.sin(Math.toRadians(mNextRotationAngle))),
                            ballRadius, mPaint);
                } else {
                    canvas.drawCircle(centerX - mRadius + ballSpacing * (BALL_SPACING_RADIUS + i) + mRotationX,
                            centerY + mRotationY, ballRadius, mPaint);
                }
            }

            if ((i + 1) % BALL_NUM == getNextBallIndex()) {
                mPaint.setStyle(Paint.Style.STROKE);

                mRotationX = (float) (ballSpacing * BALL_SPACING_RADIUS * Math.cos(Math.toRadians(mNextRotationAngle)));
                mRotationY = (float) (ballSpacing * BALL_SPACING_RADIUS * Math.sin(Math.toRadians(mNextRotationAngle)));

                if (i == BALL_NUM - 1) {
                    getFirstAndLastAngle();
                    //第一个小球
                    canvas.drawCircle((float) (centerX + 2 * ballSpacing * Math.cos(Math.toRadians(mRotationAngle))),
                            (float) (centerY + 2 * ballSpacing * Math.sin(Math.toRadians(mRotationAngle))),
                            ballRadius, mPaint);

                } else {
                    canvas.drawCircle(centerX - mRadius + ballSpacing * (BALL_SPACING_RADIUS + i) + mRotationX,
                            centerY + mRotationY, ballRadius, mPaint);
                }
            }


            if (i != mCurrentBallIndex && i != getNextBallIndex()) {
                mPaint.setStyle(Paint.Style.STROKE);
                canvas.drawCircle(centerX - mRadius + ballSpacing * i, centerY, ballRadius, mPaint);
            }

        }


        // centerX - mRadius + ballSpacing*0.5f      centerY


    }

startAnimator方法：

    //开始动画
    public void startAnimator() {
        post(new Runnable() {
            @Override
            public void run() {
                ValueAnimator animator = ValueAnimator.ofFloat(0f, 1.0f);
                animator.setDuration(5000);
                animator.setInterpolator(new LinearInterpolator());
                animator.setRepeatMode(ValueAnimator.RESTART);
                animator.setRepeatCount(ValueAnimator.INFINITE);
                animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                    @Override
                    public void onAnimationUpdate(ValueAnimator animation) {
                        mValueAnimator = (float) animation.getAnimatedValue();

                        postInvalidate();
                    }
                });
                animator.addListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationStart(Animator animation) {
                        super.onAnimationStart(animation);
                        mCurrentBallIndex = 0;
                    }

                    @Override
                    public void onAnimationRepeat(Animator animation) {
                        super.onAnimationRepeat(animation);
                        mCurrentBallIndex = getNextBallIndex();

                    }
                });
                animator.start();
            }
        });
    }

这样就实现了SwapLoading加载动画。

敬请关注github源码地址