自定义炫酷动画 - 抢红包动效

一.效果演示

好久都没有更新文章了，决定加班更新一篇文章。刚进入一个新的环境正在慢慢适应，加上深圳这边节奏又比较快，闲暇的时间是越来越少了，所以这次就分享工作中遇到的一个简单小效果。这效果花了我接近半天的时间，先来看下：

接到一个新的任务，设计师效果出来后感觉还是蛮酷的。首先想到的不是去网上找，找应该也是白找，静下心来分析分析。

二.效果分析实现

首先我们肯定会想能不能叫设计师给个 gif 图片，但是这些进度是可以由后台控制，所以单纯的 gif 图片肯定是不能实现的。因此我们只能自定义 View 去实现。红包和进度条背景给的是两张图片，爆炸效果给的也是两张元素图片，分析一下其实也挺简单的：

1、首先我们可以先实现进度条效果； 2、其次进度条动画执行完后实现爆炸效果； 3、最后进度条满格后实现缩小放大爆炸效果。

步骤是这么个步骤，关键是代码怎么写？如果我们自定义 View 已经入门了，那么写起来就很简单了，就是时间的问题而已。还有我们能想到最麻烦的问题就是适配怎么做？我们某个手机可能效果刚好，那其他手机呢？写完以后如果有卡顿又该怎么优化？问题会有一大堆的，但真要动手写起来也没那么麻烦。

1、首先我们可以先实现进度条效果

1 @Override
2    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
3        // 指定大小为宽高最大的值 * 1.1 ，为什么要多 0.1 是由于有爆炸效果
4        int size = (int) (Math.max(mRedPackageBitmap.getWidth(), mRedPackageBitmap.getHeight()) * 1.1f);
5        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
6        setMeasuredDimension(size, size);
7    }
8
9    @Override
10    protected void onDraw(Canvas canvas) {
11        // 先绘制静态内容
12        int viewHeight = getHeight();
13        int viewWidth = getWidth();
14
15        // 绘制红包
16        canvas.drawBitmap(mRedPackageBitmap, 0, 0, null);
17        // 绘制进度条背景,必须匹配上红包位置，只能按比例计算,而且还有适配所有机型
18        int progressBgWidth = mProgressBgBitmap.getWidth();
19        int left = (int) (progressBgWidth * 0.09f);
20        int top = viewHeight - mProgressBgBitmap.getHeight() - left;
21        canvas.drawBitmap(mProgressBgBitmap, left, top, null);
22        // 绘制进度
23        if(mTotalProgress == 0 || mCurrentProgress == 0){
24            return;
25        }
26        // 这些只能慢慢调试，不能出现任何跟 px dp 有关的单位，只能按比例调试
27        int progressHeight = (int) (mProgressBgBitmap.getHeight()*0.25f);
28        float progressWidth =  viewWidth*0.64f;
29        int currentProgressWidth = (int) (progressWidth*mCurrentProgress/mTotalProgress);
30        int round = progressHeight/2;
31        // 设置进度条渐变颜色
32        Shader shader = new LinearGradient(0, 0, progressWidth, 0, new int[]{mProgressStarColor,mProgressEndColor}, new float[]{0, 1.0f}, Shader.TileMode.CLAMP);
33        mProgressPaint.setShader(shader);
34        top = (int) (top*1.19f);
35        left  = (int) (left*2.5f);
36        RectF rectF = new RectF(left,top,left+currentProgressWidth,top+progressHeight);
37        canvas.drawRoundRect(rectF,round,round,mProgressPaint);
38    }
39
40    public void startAnimator(int from, int to) {
41        // 属性动画
42        ValueAnimator animator = ValueAnimator.ofFloat(from, to).setDuration(PROGRESS_EXECUTE_TIME);
43        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
44            @Override
45            public void onAnimationUpdate(ValueAnimator animation) {
46                // 不断的设置当前进度刷新进度效果
47                Float current = (Float) animation.getAnimatedValue();
48                setCurrentProgress(current);
49            }
50        });
51        animator.start();
52    } 

2、其次进度条动画执行完后实现爆炸效果

1 // 绘制爆炸效果
2  if (mBombProgress > 0 && mBombProgress < 1) {
3    // 每份角度
4    float preAngle = (float) (2 * Math.PI / mBombIcon.length);
5    for (int i = 0; i < 8; i++) {
6      // 计算每个角度
7      double angle = i * preAngle;
8      // 设置透明度
9      mBombPaint.setAlpha((int) (320 - mBombProgress * 255));
10      float cx = (float) (bombCenterX + mProgressBombRadius * mBombProgress * Math.cos(angle));
11      float cy = (float) (bombCenterY + mProgressBombRadius * mBombProgress * Math.sin(angle));
12      canvas.drawBitmap(mBombIcon[i % 2], cx, cy, mBombPaint);
13    }
14  }
15
16    // 绘制爆炸的动画
17    private void executeDisperseBombAnimator() {
18
19        ValueAnimator animator = ValueAnimator.ofFloat(0, 1f).setDuration(BOMB_EXECUTE_TIME);
20        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
21            @Override
22            public void onAnimationUpdate(ValueAnimator animation) {
23                mBombProgress = (float) animation.getAnimatedValue();
24                invalidate();
25            }
26        });
27        animator.setInterpolator(new DecelerateInterpolator());
28        animator.start();
29
30        animator.addListener(new AnimatorListenerAdapter() {
31            @Override
32            public void onAnimationEnd(Animator animation) {
33                // 绘制完爆炸以后如果是满格，执行缩小动画
34                if (mCurrentProgress == mTotalProgress) {
35                
36                }
37            }
38        });
39    } 

3、最后进度条满格后实现缩小放大爆炸效果。

1 /**
2    * 执行缩小动画
3    */
4    private void executeShrinkAnimator() {
5        if (mShrinkAnimators == null) {
6            mShrinkAnimators = new AnimatorSet();//组合动画
7            ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 1f, SHRINK_SCALE);
8            ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 1f, SHRINK_SCALE);
9
10            mShrinkAnimators.setDuration(SHRINK_EXECUTE_TIME);
11            mShrinkAnimators.setInterpolator(new DecelerateInterpolator());
12            mShrinkAnimators.play(scaleX).with(scaleY);//两个动画同时开始
13            mShrinkAnimators.start();
14
15            mShrinkAnimators.addListener(new AnimatorListenerAdapter() {
16                @Override
17                public void onAnimationEnd(Animator animation) {
18                    // mHandler.sendEmptyMessageDelayed(0x0011, 200);
19                    executeMagnifyAnimator();
20                }
21            });
22        }
23
24        mShrinkAnimators.start();
25
26        mHandler.sendEmptyMessageDelayed(0x0022, SHRINK_EXECUTE_TIME - 100);
27    }
28
29    /**
30    * 执行放大的效果
31    */
32    private void executeMagnifyAnimator() {
33
34        if (mMagnifyAnimators == null) {
35            mMagnifyAnimators = new AnimatorSet();//组合动画
36            ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", SHRINK_SCALE, 1f);
37            ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", SHRINK_SCALE, 1f);
38
39            mMagnifyAnimators.setDuration(MAGNIFY_EXECUTE_TIME);
40            mMagnifyAnimators.setInterpolator(new DecelerateInterpolator());
41            mMagnifyAnimators.play(scaleX).with(scaleY);//两个动画同时开始
42
43
44            mMagnifyAnimators.addListener(new AnimatorListenerAdapter() {
45                @Override
46                public void onAnimationEnd(Animator animation) {
47                    mHandler.sendEmptyMessageDelayed(0x0011, ANIMATION_STOP_TIME);
48                }
49            });
50        }
51        mMagnifyAnimators.start();
52    } 

视频链接：https://pan.baidu.com/s/1cAYBfuhR1WquroYjakftfg 视频密码：h7w6

本文转自 https://juejin.cn/post/6844903608324980749，如有侵权，请联系删除。