Android加載動畫系列——WifiLoadingAnim

Android加載動畫系列——WifiLoadingAnim

       我們經常會遇到這樣一種場景，加載網頁的時候，剛好遇到網速不給力，然後就加載失敗了，這個時候爲了用戶友好性原則，我們會給出一個加載失敗的頁面，有些設計會放置一張wifi的圖片，如果把圖片換成動畫會不會更好呢？讓我們來看看wifi加載動畫怎麼實現吧~

       讓我們先來看看效果圖：

1、WifiLoadingAnim.java源碼如下：

public class WifiLoadingAnim extends View {
    private float mWidth = 0f;
    private Paint mPaint;
    private int signalSize = 4;

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

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

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.save();
        canvas.translate(0, mWidth / signalSize);
        mPaint.setStrokeWidth(mWidth / signalSize / 2 / 2 / 2);
        int scale = (int) ((mAnimatedValue * signalSize - (int) (mAnimatedValue * signalSize)) * signalSize) + 1;
        RectF rect = null;
        float signalRadius = mWidth / 2 / signalSize;
        for (int i = 0; i < signalSize; i++) {

            if (i >= signalSize - scale) {
                float radius = signalRadius * i;
                rect = new RectF(
                        radius,
                        radius,
                        mWidth - radius,
                        mWidth - radius);
                if (i < signalSize - 1) {
                    mPaint.setStyle(Paint.Style.STROKE);
                    canvas.drawArc(rect, -135, 90
                            , false, mPaint);
                } else {
                    mPaint.setStyle(Paint.Style.FILL);
                    canvas.drawArc(rect, -135, 90
                            , true, mPaint);
                }
            }

        }
        canvas.restore();

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        if (getMeasuredWidth() > getHeight())
            mWidth = getMeasuredHeight();
        else
            mWidth = getMeasuredWidth();
    }

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

    private ValueAnimator valueAnimator;
    private float mAnimatedValue = 0.9f;

    public void stopAnim() {
        if (valueAnimator != null) {
            clearAnimation();

            valueAnimator.setRepeatCount(0);
            valueAnimator.cancel();
            valueAnimator.end();
            mAnimatedValue = 0.9f;
            postInvalidate();
        }
    }


    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();
                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);
            }
        });
        if (!valueAnimator.isRunning()) {
            valueAnimator.start();

        }

        return valueAnimator;
    }

    public int dip2px(float dpValue) {
        final float scale = getContext().getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }


}

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

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

 

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

wifiLoadingAnim = (WifiLoadingAnim) findViewById(R.id.wifianim);
wifiLoadingAnim.startAnim();

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