仿 360 市場下載按鈕

輕雲時解發表於2017-05-16

先看一下效果:

仿 360 市場下載按鈕

無論多複雜的動畫我們都是可以分割成小單元的,然後分步來實現。這個動畫大概分為收縮,準備,載入,完成幾個部分。為此定義一個列舉類來描述view的狀態。
public enum Status { NORMAL, START, PRE, EXPAND, LOAD, END }

收縮動畫

使用動畫不斷改變圓角矩形的寬度,觸發重繪。程式碼如下:

private void initAnim() {
        Animation animation1 = new Animation() {
            @Override
            protected void applyTransformation(float interpolatedTime, Transformation t) {
                mCurrLength = mWidth * (1 - interpolatedTime);
                if (mCurrLength < mHeight) {
                    mCurrLength = mHeight;
                    clearAnimation();
                    mAngleAnim.start();
                }
                invalidate();
            }
        };

        animation1.setDuration(mShrinkDuration);
        animation1.setInterpolator(new LinearInterpolator());
        animation1.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                mStatus = Status.START;
            }

            @Override
            public void onAnimationEnd(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        mShrinkAnim = animation1;
        ...
}複製程式碼

onDraw中繪製:

        if (mStatus == Status.START || mStatus == Status.NORMAL) {
            float left = (mWidth - mCurrLength) / 2f;
            float right = (mWidth + mCurrLength) / 2f;
            float r = mHeight / 2f;
            canvas.drawRoundRect(new RectF(left, 0, right, mHeight), r, r, mBgPaint);
            if (mStatus == Status.NORMAL) {
                Paint.FontMetrics fm = mTextPaint.getFontMetrics();
                float y = mHeight / 2 + (fm.descent - fm.ascent) / 2 - fm.descent;
                canvas.drawText("下載", mWidth / 2, y, mTextPaint);
            }
        }複製程式碼

準備動畫

此時旋轉動畫,是通過canvas繪製背景圓和三個小圓,然後不斷旋轉畫布來實現的,具體求圓心座標和角度動畫我們直接看程式碼:

 ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mAngle += mPreAnimSpeed;
                invalidate();
            }
        });
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                mStatus = Status.PRE;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                mAngleAnim.cancel();
                startAnimation(mTranslateAnim);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

        animator.setDuration(mPreAnimDuration);
        animator.setInterpolator(new LinearInterpolator());
        mAngleAnim = animator;複製程式碼

onDraw中繪製程式碼:

  if (mStatus == Status.PRE) {
            canvas.drawCircle(mWidth / 2f, mHeight / 2f, mHeight / 2f, mBgPaint);
            canvas.save();
            mTextPaint.setStyle(Paint.Style.FILL);
            canvas.rotate(mAngle, mWidth / 2, mHeight / 2);
            //大圓的圓心 半徑
            float cX = mWidth / 2f;
            float cY = mHeight / 2f;
            float radius = mHeight / 2 / 3f;
            canvas.drawCircle(cX, cY, radius, mTextPaint);
            //上方小圓的引數
            float rr = radius / 2f;
            float cYY = mHeight / 2 - (radius + rr / 3);
            canvas.drawCircle(cX, cYY, rr, mTextPaint);
            //左下小圓引數
            float cXX = (float) (cX - Math.sqrt(2) / 2f * (radius + rr / 3f));
            cYY = (float) (mHeight / 2 + Math.sqrt(2) / 2f * (radius + rr / 3f));
            canvas.drawCircle(cXX, cYY, rr, mTextPaint);
            //右下小圓引數
            cXX = (float) (cX + Math.sqrt(2) / 2f * (radius + rr / 3f));
            canvas.drawCircle(cXX, cYY, rr, mTextPaint);
            canvas.restore();
        }複製程式碼

展開動畫

展開動畫也是不斷改變view的寬度並重繪圓角矩形,同時需要對準備動畫的狀態進行向右位移。

 Animation animator1 = new Animation() {
            @Override
            protected void applyTransformation(float interpolatedTime, Transformation t) {
                mCurrLength = mHeight + (mWidth - mHeight) * interpolatedTime;
                mTranslationX = (mWidth - mHeight) / 2 * interpolatedTime;
                invalidate();
            }
        };
        animator1.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                mStatus = Status.EXPAND;
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                clearAnimation();
                mLoadAngleAnim.start();
                mMovePointAnim.start();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        animator1.setDuration(mExpandAnimDuration);
        animator1.setInterpolator(new LinearInterpolator());
        mTranslateAnim = animator1;複製程式碼

onDraw中繪製程式碼

  if (mStatus == Status.EXPAND) {
            float left = (mWidth - mCurrLength) / 2f;
            float right = (mWidth + mCurrLength) / 2f;
            float r = mHeight / 2f;
            canvas.drawRoundRect(new RectF(left, 0, right, mHeight), r, r, mBgPaint);
            canvas.save();
            mTextPaint.setStyle(Paint.Style.FILL);
            canvas.translate(mTranslationX, 0);
            //大圓的圓心 半徑
            float cX = mWidth / 2f;
            float cY = mHeight / 2f;
            float radius = mHeight / 2 / 3f;
            canvas.drawCircle(cX, cY, radius, mTextPaint);
            //上方小圓的引數
            float rr = radius / 2f;
            float cYY = mHeight / 2 - (radius + rr / 3);
            canvas.drawCircle(cX, cYY, rr, mTextPaint);
            //左下小圓引數
            float cXX = (float) (cX - Math.sqrt(2) / 2f * (radius + rr / 3f));
            cYY = (float) (mHeight / 2 + Math.sqrt(2) / 2f * (radius + rr / 3f));
            canvas.drawCircle(cXX, cYY, rr, mTextPaint);
            //右下小圓引數
            cXX = (float) (cX + Math.sqrt(2) / 2f * (radius + rr / 3f));
            canvas.drawCircle(cXX, cYY, rr, mTextPaint);
            canvas.restore();
        }複製程式碼

載入動畫

載入動畫分三部分,右側的旋轉動畫,正弦軌跡運動的小球動畫,進度更新的動畫。正弦動畫要求出正弦函式的週期,y軸偏移量,x軸偏移量。

 ValueAnimator animator2 = ValueAnimator.ofFloat(0, 1);
        animator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mLoadAngle += mLoadRotateAnimSpeed;
                invalidate();
            }
        });
        animator2.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                mStatus = Status.LOAD;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                mLoadAngleAnim.cancel();
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator2.setDuration(Integer.MAX_VALUE);
        animator2.setInterpolator(new LinearInterpolator());
        mLoadAngleAnim = animator2;複製程式碼

onDraw中繪製程式碼:

 if (mStatus == Status.LOAD || mStatus == Status.END) {
            float left = (mWidth - mCurrLength) / 2f;
            float right = (mWidth + mCurrLength) / 2f;
            float r = mHeight / 2f;
            mBgPaint.setColor(mProgressColor);
            canvas.drawRoundRect(new RectF(left, 0, right, mHeight), r, r, mBgPaint);
            if (mProgress != 100) {
                for (int i = 0; i < mFourMovePoints.length; i++) {
                    if (mFourMovePoints[i].isDraw)
                        canvas.drawCircle(mFourMovePoints[i].moveX, mFourMovePoints[i].moveY, mFourMovePoints[i].radius, mTextPaint);
                }
            }
            float progressRight = mProgress * mWidth / 100f;
            mBgPaint.setColor(mBgColor);
            canvas.save();
            canvas.clipRect(0, 0, progressRight, mHeight);
            canvas.drawRoundRect(new RectF(left, 0, right, mHeight), r, r, mBgPaint);
            canvas.restore();

            if (mProgress != 100) {
                canvas.drawCircle(mWidth - mHeight / 2, mHeight / 2, mHeight / 2, mBgPaint);
                canvas.save();
                mTextPaint.setStyle(Paint.Style.FILL);
                canvas.rotate(mLoadAngle, mWidth - mHeight / 2, mHeight / 2);
                canvas.drawCircle(mWidth - mHeight + 30, getCenterY(mWidth - mHeight + 30, 5), 5, mTextPaint);
                canvas.drawCircle(mWidth - mHeight + 45, getCenterY(mWidth - mHeight + 45, 8), 8, mTextPaint);
                canvas.drawCircle(mWidth - mHeight + 68, getCenterY(mWidth - mHeight + 68, 11), 11, mTextPaint);
                canvas.drawCircle(mWidth - mHeight + 98, getCenterY(mWidth - mHeight + 98, 14), 14, mTextPaint);
                canvas.restore();
            }

            Paint.FontMetrics fm = mTextPaint.getFontMetrics();
            float y = mHeight / 2 + (fm.descent - fm.ascent) / 2 - fm.descent;
            canvas.drawText(mProgress + "%", mWidth / 2, y, mTextPaint);
        }複製程式碼

完整程式碼見GitHub

相關文章