在地铁中刷抖音，由于网络不通畅加载很慢，抖音会加载一个加载动画，感觉很有意思，于是分析了一下，自己写了Demo，实现效果。

效果图

分析动画

首先分析动画，初始状态是由两个相切的圆形图案组成。

将动画拆解为两部分看。

从蓝色小球在左，红色小球在右作为起始位置，蓝色小球向右移动，红色小球向左移动(同时先缩小，在还原)，两个小球相交的部分变黑。

同第一步相同，只是两小球变换位置。

进行绘制

主要运用Drawable动画进行绘制。

public class DouYinLoadingDrawable extends Drawable implements Animatable{

}

复制代码

首先准备三个Paint，和三个Path。为了绘制动画中的两个圆形图案和重合部分的图案。

private Paint leftBallPaint, rightBallPaint, coincideBallPaint;

private Path leftBallPath, rightBallPath, coincideBallPath;

复制代码

绘制分为两个过程，蓝色小球向左和蓝色小球向右，创建枚举来控制动画的过程。

public enum Direction{

LEFT,

RIGHT

}

复制代码

开始绘制，在ondraw()中进行绘制。

@Override

public void draw(@NonNull Canvas canvas){

if (mCurrentDirection == Direction.LEFT) {

canvas.save();

leftBallPath.reset();

leftBallPath.addCircle(centerX - radius + translate, centerY, radius, Path.Direction.CCW);

canvas.drawPath(leftBallPath, leftBallPaint);

canvas.restore();

canvas.save();

rightBallPath.reset();

rightBallPath.addCircle(centerX + radius - translate, centerY, radius * scale, Path.Direction.CCW);

canvas.drawPath(rightBallPath, rightBallPaint);

canvas.restore();

canvas.save();

coincideBallPath.reset();

coincideBallPath.op(leftBallPath, rightBallPath, Path.Op.INTERSECT);

canvas.drawPath(coincideBallPath, coincideBallPaint);

canvas.restore();

} else if (mCurrentDirection == Direction.RIGHT) {

canvas.save();

rightBallPath.reset();

rightBallPath.addCircle(centerX - radius + translate, centerY, 20, Path.Direction.CCW);

canvas.drawPath(rightBallPath, rightBallPaint);

canvas.restore();

canvas.save();

leftBallPath.reset();

leftBallPath.addCircle(centerX + radius - translate, centerY, 20 * scale, Path.Direction.CCW);

canvas.drawPath(leftBallPath, leftBallPaint);

canvas.restore();

canvas.save();

coincideBallPath.reset();

coincideBallPath.op(leftBallPath, rightBallPath, Path.Op.INTERSECT);

canvas.drawPath(coincideBallPath, coincideBallPaint);

canvas.restore();

}

}

复制代码

进行动画部分代码编写，主要运用ValueAnimator

首先开始向左部分动画，向左部分动画结束后，两小球交换圆心左边，重复向左部分动画。

private void leftAnimation(){

//平移动画

final ValueAnimator translateAnimator = ValueAnimator.ofFloat(0, 2 * radius);

translateAnimator.setStartDelay(200);

translateAnimator.setDuration(350);

translateAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

translateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation){

translate = (float) translateAnimator.getAnimatedValue();

invalidateSelf();

}

});

//缩放动画

final ValueAnimator scaleAnimator = ValueAnimator.ofFloat(1, 0.5f, 1);

scaleAnimator.setStartDelay(200);

scaleAnimator.setDuration(350);

scaleAnimator.setInterpolator(new AccelerateDecelerateInterpolator());

scaleAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation){

scale = (float) scaleAnimator.getAnimatedValue();

invalidateSelf();

}

});

translateAnimator.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation){

//每次动画结束后，改变Direction的值，进行反向动画

if (mCurrentDirection == Direction.LEFT)

mCurrentDirection = Direction.RIGHT;

else

mCurrentDirection = Direction.LEFT;

translate = 0;

leftAnimation();

}

});

animatorSet = new AnimatorSet();

animatorSet.playTogether(translateAnimator, scaleAnimator);

animatorSet.start();

}

复制代码

动画使用

在ImageView中设置drawable即可

DouYinLoadingDrawable douYinLoadingDrawable =new DouYinLoadingDrawable();

imageView.setImageDrawable(douYinLoadingDrawable);

douYinLoadingDrawable.start();

复制代码

GitHub地址

往期文章地址