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同城加载动画

推荐阅读更多精彩内容