Android加载动画系列——GearsLoadingAnim

来源：互联网发布：西安seo工资待遇编辑：程序博客网时间：2024/06/16 14:19

Android加载动画系列——GearsLoadingAnim

Ios系统每次升级的时候，界面上的齿轮图标都会转动，今天就让我们来探索一下这个效果是怎么实现的吧~

让我们先来看看效果图：

1、GearsLoadingAnim.java源码如下：

public class GearsLoadingAnim extends View {    private float mWidth = 0f;    private Paint mPaint, mPaintWheelBig, mPaintWheelSmall, mPaintAxle, mPaintCenter;    private float mPadding = 0f;    private float mPaintCenterRadius;    private float mWheelSmallLength, mWheelBigLength;    private int mWheelSmallSpace = 8;    private int mWheelBigSpace = 6;    ValueAnimator valueAnimator = null;    float mAnimatedValue = 0f;    public GearsLoadingAnim(Context context) {        this(context, null);    }    public GearsLoadingAnim(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public GearsLoadingAnim(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initPaint();    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        if (getMeasuredWidth() > getHeight()) {            mWidth = getMeasuredHeight();        } else {            mWidth = getMeasuredWidth();        }    }    private void drawCircle(Canvas canvas) {        canvas.drawCircle(mWidth / 2, mWidth / 2, mWidth / 2 - mPadding, mPaint);        canvas.drawCircle(mWidth / 2, mWidth / 2, mWidth / 4, mPaint);    }    private void drawAxleAndCenter(Canvas canvas) {        for (int i = 0; i < 3; i++) {            float x2 = (float) ((mWidth / 2.f - mPadding) * Math.cos(i * (360 / 3) * Math.PI / 180f));            float y2 = (float) ((mWidth / 2.f - mPadding) * Math.sin(i * (360 / 3) * Math.PI / 180f));            float x = (float) (mPaintCenterRadius * Math.cos(i * (360 / 3) * Math.PI / 180f));            float y = (float) (mPaintCenterRadius * Math.sin(i * (360 / 3) * Math.PI / 180f));            canvas.drawLine(mWidth / 2 - x,                    mWidth / 2 - y, mWidth / 2 - x2,                    mWidth / 2 - y2, mPaintAxle);        }        canvas.drawCircle(mWidth / 2, mWidth / 2, mPaintCenterRadius, mPaintCenter);    }    private void drawWheelBig(Canvas canvas) {        for (int i = 0; i < 360; i++) {            int angle = (int) (mAnimatedValue * mWheelBigSpace + i);//顺时针            float x = (float) ((mWidth / 2.f - mPadding + mWheelBigLength) * Math.cos(angle * Math.PI / 180f));            float y = (float) ((mWidth / 2.f - mPadding + mWheelBigLength) * Math.sin(angle * Math.PI / 180f));            float x2 = (float) ((mWidth / 2.f - mPadding) * Math.cos(angle * Math.PI / 180f));            float y2 = (float) ((mWidth / 2.f - mPadding) * Math.sin(angle * Math.PI / 180f));            canvas.drawLine(mWidth / 2.f - x, mWidth / 2.f - y, mWidth / 2.f - x2, mWidth / 2.f - y2, mPaintWheelBig);        }    }    private void drawWheelSmall(Canvas canvas) {        for (int i = 0; i < 360; i = i + mWheelSmallSpace) {            int angle = (int) (360 - mAnimatedValue * mWheelBigSpace + i);            float x = (float) ((mWidth / 4.f) * Math.cos(angle * Math.PI / 180f));            float y = (float) ((mWidth / 4.f) * Math.sin(angle * Math.PI / 180f));            float x2 = (float) ((mWidth / 4.f + mWheelSmallSpace) * Math.cos(angle * Math.PI / 180f));            float y2 = (float) ((mWidth / 4.f + mWheelSmallSpace) * Math.sin(angle * Math.PI / 180f));            canvas.drawLine(mWidth / 2.f - x, mWidth / 2.f - y,                    mWidth / 2.f - x2, mWidth / 2.f - y2, mPaintWheelSmall);        }    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        canvas.save();        drawCircle(canvas);        drawWheelBig(canvas);        drawWheelSmall(canvas);        drawAxleAndCenter(canvas);        canvas.restore();    }    public int dip2px(float dpValue) {        final float scale = getContext().getResources().getDisplayMetrics().density;        return (int) (dpValue * scale + 0.5f);    }    private void initPaint() {        mPaintCenterRadius = dip2px(2.5f) / 2;        mPaintCenter = new Paint();        mPaintCenter.setAntiAlias(true);        mPaintCenter.setStyle(Paint.Style.STROKE);        mPaintCenter.setColor(Color.WHITE);        mPaintCenter.setStrokeWidth(dip2px(0.5f));        mPaint = new Paint();        mPaint.setAntiAlias(true);        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setColor(Color.WHITE);        mPaint.setStrokeWidth(dip2px(2));        mPaintAxle = new Paint();        mPaintAxle.setAntiAlias(true);        mPaintAxle.setStyle(Paint.Style.STROKE);        mPaintAxle.setColor(Color.WHITE);        mPaintAxle.setStrokeWidth(dip2px(2f));        mPaintWheelBig = new Paint();        mPaintWheelBig.setAntiAlias(true);        mPaintWheelBig.setStyle(Paint.Style.STROKE);        mPaintWheelBig.setColor(Color.WHITE);        mPaintWheelBig.setStrokeWidth(dip2px(1));        mPaintWheelSmall = new Paint();        mPaintWheelSmall.setAntiAlias(true);        mPaintWheelSmall.setStyle(Paint.Style.STROKE);        mPaintWheelSmall.setColor(Color.WHITE);        mPaintWheelSmall.setStrokeWidth(dip2px(0.5f));        mPadding = dip2px(5);        mWheelSmallLength = dip2px(3);        mWheelBigLength = dip2px(2.5f);    }    private ValueAnimator startViewAnim(int startF, final int endF, long time) {        valueAnimator = ValueAnimator.ofInt(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 = (int) valueAnimator.getAnimatedValue();                mAnimatedValue = mAnimatedValue / 100f;                postInvalidate();            }        });        valueAnimator.addListener(new AnimatorListenerAdapter() {            @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);            }        });        if (!valueAnimator.isRunning()) {            valueAnimator.start();        }        return valueAnimator;    }    public void stopAnim() {        if (valueAnimator != null) {            clearAnimation();            valueAnimator.setRepeatCount(0);            valueAnimator.cancel();            valueAnimator.end();            postInvalidate();        }    }    public void startAnim() {        stopAnim();        startViewAnim(1, 100, 300);    }}

2、接着在layout布局文件中使用我们自定义的动画控件

<com.cyril.loadinganim.GearsLoadingAnim    android:id="@+id/gearloading"    android:layout_width="50dp"    android:layout_height="50dp"    android:visibility="gone"     />

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

gearsLoadingAnim = (GearsLoadingAnim) findViewById(R.id.gearloading);gearsLoadingAnim.startAnim();

4、戳这里，小编带你去源码的下载地址：http://download.csdn.net/detail/zhimingshangyan/9582830

0 0