Material Progress

Blog

前言

各式各样的progress、loading效果已经很多。不过，总要推陈出新，让用户眼前一亮，让等待显得不那么漫长。这篇文章介绍的效果灵感来自 Safari 插件——“妈妈再也不用担心我的 macbook 发热计划”。

效果图

原理

这个效果并不复杂——外侧较窄的弧(outerArc)逆时针转动、内侧 较宽的弧(innerArc)逆时针转动。不断转动，不断产生交叉、分离的效果。outerArc、innerArc 的弧长均是180度。用 Animation 做节拍器，不断的更新outerArc、innerArc的起始位置(outerArcStartAngle、innerArcStartAngle)。

关键源码

@Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        init();
    }
    private void init() {
        int sideLen = Math.min(getWidth(), getHeight());
        float outerArcStrokeWidth = sideLen / 20f;
        float innerArcStrokeWidth = outerArcStrokeWidth * 3;
        outerRectF = new RectF(outerArcStrokeWidth*0.5f, outerArcStrokeWidth*0.5f, sideLen-outerArcStrokeWidth*0.5f, sideLen-outerArcStrokeWidth*0.5f);
        innerRectF = new RectF(outerArcStrokeWidth+innerArcStrokeWidth*0.5f, outerArcStrokeWidth+innerArcStrokeWidth*0.5f, sideLen-(outerArcStrokeWidth+innerArcStrokeWidth*0.5f),sideLen-(outerArcStrokeWidth+innerArcStrokeWidth*0.5f) );
        mainColor = Color.parseColor("#e7e7e7");
        outerArcPaint = new Paint();
        outerArcPaint.setAntiAlias(true);
        outerArcPaint.setColor(mainColor);
        outerArcPaint.setStrokeWidth(outerArcStrokeWidth);
        outerArcPaint.setStyle(Paint.Style.STROKE);
        innerArcPaint = new Paint();
        innerArcPaint.setAntiAlias(true);
        innerArcPaint.setColor(mainColor);
        innerArcPaint.setStrokeWidth(innerArcStrokeWidth);
        innerArcPaint.setStyle(Paint.Style.STROKE);
        outerArcStartAngle = 90;
        innerArcStartAngle = 270;
        Animation animation = new LoadAnimation();
        animation.setInterpolator(new LinearInterpolator());
        animation.setDuration(DURATION);
        animation.setRepeatCount(Animation.INFINITE);
        startAnimation(animation);
    }
    class LoadAnimation extends Animation{
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            outerArcStartAngle = 90 - 360*interpolatedTime;
            innerArcStartAngle = 270 + 360*interpolatedTime;
            invalidate();
        }
    }
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawArc(outerRectF, outerArcStartAngle, SWEEP_ANGLE, false, outerArcPaint);
        canvas.drawArc(innerRectF, innerArcStartAngle, SWEEP_ANGLE, false, innerArcPaint);
    }