Android加載動畫系列——CircularZoomLoadingAnim

Android加載動畫系列——CircularZoomLoadingAnim

       我們經常在應用中看到“正在加載中…”這樣的文案，有時候設計要求文字後面的三個小點可以閃爍，我們就來實現一下三個小點跳動的效果。

       讓我們先來看看效果圖：

1、CircularZoomLoadingAnim.java源碼如下：

   public class CircularZoomLoadingAnim extends View {
    private Paint mPaint;
    private float mWidth = 0f;
    private float mHeight = 0f;
    private float mMaxRadius = 8;
    private int circularCount = 3;
    private float mAnimatedValue = 1.0f;
    private int mJumpValue = 0;

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

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

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

    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.WHITE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float circularX = mWidth / circularCount;
        for (int i = 0; i < circularCount; i++) {
            if (i == mJumpValue % circularCount) {
                canvas.drawCircle(i * circularX + circularX / 2f, mHeight / 2, mMaxRadius * mAnimatedValue, mPaint);
            } else {
                canvas.drawCircle(i * circularX + circularX / 2f, mHeight / 2, mMaxRadius, mPaint);
            }
        }

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();
    }

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

    ValueAnimator valueAnimator = null;

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

    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) {
                mAnimatedValue = (float) valueAnimator.getAnimatedValue();
                if (mAnimatedValue < 0.2) {
                    mAnimatedValue = 0.2f;
                }
                invalidate();
            }
        });

        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }

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

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

 

2、接下來我們在layout中引用自定義的動畫控件，如下所示：

<com.cyril.loadinganim.CircularZoomLoadingAnim
    android:id="@+id/circularzoom"
    android:layout_width="50dp"
    android:layout_height="50dp" />

 

3、然後在Activity中實現動畫的播放和停止，使用事例如下：

circularZoomLoadingAnim = (CircularZoomLoadingAnim) findViewById(R.id.circularzoom);
circularZoomLoadingAnim.startAnim();

4、  戳這裏，小編帶你去源碼的下載地址：http://download.csdn.net/detail/zhimingshangyan/9582830