自定義炫酷動畫 - 搶紅包動效

一.效果演示

很久都沒有更新文章了，決定加班更新一篇文章。剛進入一個新的環境正在慢慢適應，加上深圳這邊節奏又比較快，閒暇的時間是愈來愈少了，因此此次就分享工做中遇到的一個簡單小效果。這效果花了我接近半天的時間，先來看下：

接到一個新的任務，設計師效果出來後感受仍是蠻酷的。首先想到的不是去網上找，找應該也是白找，靜下心來分析分析。

二.效果分析實現

首先咱們確定會想能不能叫設計師給個 gif 圖片，可是這些進度是能夠由後臺控制，因此單純的 gif 圖片確定是不能實現的。所以咱們只能自定義 View 去實現。紅包和進度條背景給的是兩張圖片，爆炸效果給的也是兩張元素圖片，分析一下其實也挺簡單的：

一、首先咱們能夠先實現進度條效果； 二、其次進度條動畫執行完後實現爆炸效果； 三、最後進度條滿格後實現縮小放大爆炸效果。

步驟是這麼個步驟，關鍵是代碼怎麼寫？若是咱們自定義 View 已經入門了，那麼寫起來就很簡單了，就是時間的問題而已。還有咱們能想到最麻煩的問題就是適配怎麼作？咱們某個手機可能效果恰好，那其餘手機呢？寫完之後若是有卡頓又該怎麼優化？問題會有一大堆的，但真要動手寫起來也沒那麼麻煩。

一、首先咱們能夠先實現進度條效果

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 指定大小爲寬高最大的值 * 1.1 ，爲何要多 0.1 是因爲有爆炸效果
        int size = (int) (Math.max(mRedPackageBitmap.getWidth(), mRedPackageBitmap.getHeight()) * 1.1f);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(size, size);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 先繪製靜態內容
        int viewHeight = getHeight();
        int viewWidth = getWidth();

        // 繪製紅包
        canvas.drawBitmap(mRedPackageBitmap, 0, 0, null);
        // 繪製進度條背景,必須匹配上紅包位置，只能按比例計算,並且還有適配全部機型
        int progressBgWidth = mProgressBgBitmap.getWidth();
        int left = (int) (progressBgWidth * 0.09f);
        int top = viewHeight - mProgressBgBitmap.getHeight() - left;
        canvas.drawBitmap(mProgressBgBitmap, left, top, null);
        // 繪製進度
        if(mTotalProgress == 0 || mCurrentProgress == 0){
            return;
        }
        // 這些只能慢慢調試，不能出現任何跟 px dp 有關的單位，只能按比例調試
        int progressHeight = (int) (mProgressBgBitmap.getHeight()*0.25f);
        float progressWidth =  viewWidth*0.64f;
        int currentProgressWidth = (int) (progressWidth*mCurrentProgress/mTotalProgress);
        int round = progressHeight/2;
        // 設置進度條漸變顏色
        Shader shader = new LinearGradient(0, 0, progressWidth, 0, new int[]{mProgressStarColor,mProgressEndColor}, new float[]{0, 1.0f}, Shader.TileMode.CLAMP);
        mProgressPaint.setShader(shader);
        top = (int) (top*1.19f);
        left  = (int) (left*2.5f);
        RectF rectF = new RectF(left,top,left+currentProgressWidth,top+progressHeight);
        canvas.drawRoundRect(rectF,round,round,mProgressPaint);
    }

    public void startAnimator(int from, int to) {
        // 屬性動畫
        ValueAnimator animator = ValueAnimator.ofFloat(from, to).setDuration(PROGRESS_EXECUTE_TIME);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                // 不斷的設置當前進度刷新進度效果
                Float current = (Float) animation.getAnimatedValue();
                setCurrentProgress(current);
            }
        });
        animator.start();
    }
複製代碼

二、其次進度條動畫執行完後實現爆炸效果

// 繪製爆炸效果
  if (mBombProgress > 0 && mBombProgress < 1) {
    // 每份角度
    float preAngle = (float) (2 * Math.PI / mBombIcon.length);
    for (int i = 0; i < 8; i++) {
      // 計算每一個角度
      double angle = i * preAngle;
      // 設置透明度
      mBombPaint.setAlpha((int) (320 - mBombProgress * 255));
      float cx = (float) (bombCenterX + mProgressBombRadius * mBombProgress * Math.cos(angle));
      float cy = (float) (bombCenterY + mProgressBombRadius * mBombProgress * Math.sin(angle));
      canvas.drawBitmap(mBombIcon[i % 2], cx, cy, mBombPaint);
    }
  }

    // 繪製爆炸的動畫
    private void executeDisperseBombAnimator() {

        ValueAnimator animator = ValueAnimator.ofFloat(0, 1f).setDuration(BOMB_EXECUTE_TIME);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mBombProgress = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        animator.setInterpolator(new DecelerateInterpolator());
        animator.start();

        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                // 繪製完爆炸之後若是是滿格，執行縮小動畫
                if (mCurrentProgress == mTotalProgress) {
                
                }
            }
        });
    }
複製代碼

三、最後進度條滿格後實現縮小放大爆炸效果。

/**
    * 執行縮小動畫
    */
    private void executeShrinkAnimator() {
        if (mShrinkAnimators == null) {
            mShrinkAnimators = new AnimatorSet();//組合動畫
            ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 1f, SHRINK_SCALE);
            ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 1f, SHRINK_SCALE);

            mShrinkAnimators.setDuration(SHRINK_EXECUTE_TIME);
            mShrinkAnimators.setInterpolator(new DecelerateInterpolator());
            mShrinkAnimators.play(scaleX).with(scaleY);//兩個動畫同時開始
            mShrinkAnimators.start();

            mShrinkAnimators.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    // mHandler.sendEmptyMessageDelayed(0x0011, 200);
                    executeMagnifyAnimator();
                }
            });
        }

        mShrinkAnimators.start();

        mHandler.sendEmptyMessageDelayed(0x0022, SHRINK_EXECUTE_TIME - 100);
    }

    /**
    * 執行放大的效果
    */
    private void executeMagnifyAnimator() {

        if (mMagnifyAnimators == null) {
            mMagnifyAnimators = new AnimatorSet();//組合動畫
            ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", SHRINK_SCALE, 1f);
            ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", SHRINK_SCALE, 1f);

            mMagnifyAnimators.setDuration(MAGNIFY_EXECUTE_TIME);
            mMagnifyAnimators.setInterpolator(new DecelerateInterpolator());
            mMagnifyAnimators.play(scaleX).with(scaleY);//兩個動畫同時開始


            mMagnifyAnimators.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mHandler.sendEmptyMessageDelayed(0x0011, ANIMATION_STOP_TIME);
                }
            });
        }
        mMagnifyAnimators.start();
    }
複製代碼

視頻連接：https://pan.baidu.com/s/1cAYBfuhR1WquroYjakftfg 視頻密碼：h7w6