Android动画 - 仿抖音加载动画

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

效果图

douyinloading.gif

分析动画

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

1. 从蓝色小球在左，红色小球在右作为起始位置，蓝色小球向右移动，红色小球向左移动（同时先缩小，在还原），两个小球相交的部分变黑。
2. 同第一步相同，只是两小球变换位置。

进行绘制

主要运用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地址

有用记得点颗小星星

往期文章地址

Android动画 - 仿花束直播加载动画
Android动画 - 仿58同城加载动画