Android加载动画系列—— CircularJumpLoadingAnim

来源：互联网发布：js创建一个数组编辑：程序博客网时间：2024/06/06 17:15

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

让我们先来看看效果图：

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

1、CircularJumpLoadingAnim.java源码如下：

               public class CircularJumpLoadingAnim extends View {    private Paint mPaint;    private float mWidth = 0f;    private float mHeight = 0f;    private float mMaxRadius = 6;    private int circularCount = 4;    private float mAnimatedValue = 0f;    private int mJumpValue = 0;    public CircularJumpLoadingAnim(Context context) {        this(context, null);    }    public CircularJumpLoadingAnim(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public CircularJumpLoadingAnim(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initPaint();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        mWidth = getMeasuredWidth();        mHeight = getMeasuredHeight();    }    @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 - mHeight / 2 * mAnimatedValue,                        mMaxRadius, mPaint);            } else {                canvas.drawCircle(i * circularX + circularX / 2f,                        mHeight / 2,                        mMaxRadius, mPaint);            }        }    }    private void initPaint() {        mPaint = new Paint();        mPaint.setAntiAlias(true);        mPaint.setStyle(Paint.Style.FILL);        mPaint.setColor(Color.WHITE);    }    public void startAnim() {        stopAnim();        startViewAnim(0f, 1f, 500);    }    public void stopAnim() {        if (valueAnimator != null) {            clearAnimation();            mAnimatedValue = 0f;            mJumpValue = 0;            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 valueAnimator) {                mAnimatedValue = (float) valueAnimator.getAnimatedValue();                if (mAnimatedValue > 0.5) {                    mAnimatedValue = 1 - mAnimatedValue;                }                invalidate();            }        });        valueAnimator.addListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                super.onAnimationEnd(animation);            }            @Override            public void onAnimationStart(Animator animation) {                super.onAnimationStart(animation);            }            @Override            public void onAnimationRepeat(Animator animation) {                super.onAnimationRepeat(animation);                mJumpValue++;            }        });        if (!valueAnimator.isRunning()) {            valueAnimator.start();        }        return valueAnimator;    }}

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

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

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

circularJumpLoadingAnim = (CircularJumpLoadingAnim) findViewById(R.id.circularjump);circularJumpLoadingAnim.startAnim();

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

1 0