image
image.gif
接着我们上一年的博眼球的主题，接下来的这篇我们仍然以UI效果为题开展主题推送，相信小伙伴们或多或少都做过App开发，App中最常见的一类UI效果，自然就是各种各样的Loading了，这篇文章我们就以Loading入手，介绍一种加载动画的思路，废话不多，直接进入正题。
image
image.gif
以上图为例，要实现一个动画，我们首先应该观察，在整个动画过程中，那些是变化的，那些是静止的，从而考虑策略，进行实现。仔细观察不难看出，这是一个圆弧以圆心为中心旋转所构成的动画。由此我们可以看出，在该动画中圆弧的弧度是没有变化的，只是绘制圆弧后，画布在旋转，这样我们就可以实现该动画效果
完整代码如下:
public class RingRotateDrawable extends Drawable {
private Paint mArcPaint;
private int mRotate;
public static final String KEY_ROTATE = "ROTATE";
private ValueAnimator mValueAnimator;
public RingRotateDrawable(int color) {
super();
mArcPaint = new Paint();
mArcPaint.setColor(color);
mArcPaint.setStrokeWidth(10);
mArcPaint.setStyle(Paint.Style.STROKE);
}
@Override
public void draw(@NonNull Canvas canvas) {
canvas.rotate(mRotate,getBounds().left+getBounds().width()/2,getBounds().top+getBounds().height()/2);
RectF rectF = new RectF(getBounds().left+10,getBounds().top+10,getBounds().right-10,getBounds().bottom-10);
canvas.drawArc(rectF, 0, 330, false, mArcPaint);
}
@Override
public void setAlpha(int alpha) {
}
@Override
public void setColorFilter(@Nullable ColorFilter colorFilter) {
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
public void start() {
PropertyValuesHolder mPropertyRotate = PropertyValuesHolder.ofInt(KEY_ROTATE, 0, 360);
mValueAnimator = new ValueAnimator();
mValueAnimator.setValues(mPropertyRotate);
mValueAnimator.setDuration(1000);
mValueAnimator.setRepeatMode(ValueAnimator.RESTART);
mValueAnimator.setRepeatCount(1000);
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mRotate = (int) animation.getAnimatedValue(KEY_ROTATE);
invalidateSelf();
}
});
mValueAnimator.start();
}
}
image.gif
根据上述原理，我们还可以实现如下花式Loading，大家自行尝试下吧。
image
image.gif
[PS:简单的摆了一下，布局随便拖的，凑合看！]
image
image.gif
