Android加载动画系列——CircularRingLoadingAnim

Android加载动画系列——CircularRingLoadingAnim

       小编在逛掘金社区的时候，一不小心看到了一篇讲加载动画的文章，于是点进去看了看，被这些炫酷的加载动画深深地吸引了，于是小编觉得有必要自己动手记录一下这些炫酷的动画，顺便丰富一下自己的学习笔记。

       让我们先来看看效果图：

       在此我就不做过多的分析，直接上源码。

1、attrs.xml源码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircularRingLoadingAnim">
        <attr name="ring_color" format="color" />
        <attr name="block_color" format="color" />
    </declare-styleable>
</resources>

 

2、CircularRingLoadingAnim.java源码如下：

public class CircularRingLoadingAnim extends View {

    private Paint mPaint, mPaintRing;
    private float mWidth = 0f;
    private float mPadding = 0f;
    private float startAngle = 0f;

    RectF rectF = new RectF();


    public CircularRingLoadingAnim(Context context) {
        this(context, null);
    }

    public CircularRingLoadingAnim(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircularRingLoadingAnim(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint(attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (getMeasuredWidth() > getHeight())
            mWidth = getMeasuredHeight();
        else
            mWidth = getMeasuredWidth();
        mPadding = 5;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        mPaintRing.setColor(Color.argb(100, 255, 255, 255));
        canvas.drawCircle(mWidth / 2, mWidth / 2, mWidth / 2 - mPadding, mPaintRing);
//        mPaint.setColor(Color.RED);
        rectF = new RectF(mPadding, mPadding, mWidth - mPadding, mWidth - mPadding);
        canvas.drawArc(rectF, startAngle, 100, false, mPaint);
    }

    private void initPaint(AttributeSet attrs) {

        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.CircularRingLoadingAnim);
        int mRingBgColor = typedArray.getColor(R.styleable.CircularRingLoadingAnim_ring_color, Color.WHITE);
        int mBlockColor= typedArray.getColor(R.styleable.CircularRingLoadingAnim_block_color, Color.WHITE);


        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(mBlockColor);
        mPaint.setStrokeWidth(8);

        mPaintRing = new Paint();
        mPaintRing.setAntiAlias(true);
        mPaintRing.setStyle(Paint.Style.STROKE);
        mPaintRing.setColor(mRingBgColor);
        mPaintRing.setStrokeWidth(8);
    }

    public void startAnim() {
        stopAnim();
        startViewAnim(0f, 1f, 1000);
    }

    public void stopAnim() {
        if (valueAnimator != null) {
            clearAnimation();
            valueAnimator.setRepeatCount(0);
            valueAnimator.cancel();
            valueAnimator.end();
        }
    }

    ValueAnimator valueAnimator;

    private ValueAnimator startViewAnim(float startF, final float endF, long time) {
        valueAnimator = ValueAnimator.ofFloat(startF, endF);
        valueAnimator.setDuration(time);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        valueAnimator.setRepeatMode(ValueAnimator.RESTART);

        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) valueAnimator.getAnimatedValue();
                startAngle = 360 * value;
                invalidate();
            }
        });
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationCancel(Animator animation) {
                super.onAnimationCancel(animation);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                super.onAnimationRepeat(animation);
            }

            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
            }

            @Override
            public void onAnimationPause(Animator animation) {
                super.onAnimationPause(animation);
            }

            @Override
            public void onAnimationResume(Animator animation) {
                super.onAnimationResume(animation);
            }
        });
        if (!valueAnimator.isRunning()) {
            valueAnimator.start();
        }
        return valueAnimator;
    }
}

 

3、接下来就是如何使用的问题，首先我们需要在layout中引用自定义的动画控件，如下所示：

<com.cyril.loadinganim.CircularRingLoadingAnim
    android:id="@+id/circularring"
    android:layout_width="50dp"
    android:layout_height="50dp"

    app:block_color="@android:color/holo_red_light"
    app:ring_color="@android:color/white" />

 

4、然后在相关的Activity中实现动画的播放和停止，使用事例如下：

circularRingLoadingAnim = (CircularRingLoadingAnim) findViewById(R.id.circularring);
circularRingLoadingAnim.startAnim();

5、  最后小编双手奉上源码的下载地址：http://download.csdn.net/detail/zhimingshangyan/9582830