Android自定义drawable-----各种各样的Loading效果

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

你可能感兴趣的:(Android自定义drawable-----各种各样的Loading效果)