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