在地铁中刷抖音，由于网络不通畅加载很慢，抖音会加载一个加载动画，感觉很有意思，于是分析了一下，自己写了Demo，实现效果。
效果图
douyinloading.gif
分析动画
首先分析动画，初始状态是由两个相切的圆形图案组成。
将动画拆解为两部分看。
- 从蓝色小球在左，红色小球在右作为起始位置，蓝色小球向右移动，红色小球向左移动（同时先缩小，在还原），两个小球相交的部分变黑。
- 同第一步相同，只是两小球变换位置。
进行绘制
主要运用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();
