抖音直播间最活跃用户展示动画

你可能学到的一些知识

• 从文件解码时降低采样率节省内存
• 从原图片生成center_crop的目标图片
• BitmapShader的使用
• Matrix的使用
• 和一些transition小技巧理解坐标原点很重要

效果图

Talk is Cheap , Show You Code

采样率计算

      private int downSample(int sourceWidth, int sourceHeight, int targetWidth, int targetHeight) {
            int sample = 0;
            while (true) {
                if (sourceWidth / Math.pow(2, sample + 1) > targetWidth && sourceHeight / Math.pow(2, sample + 1) > targetHeight) {
                    sample++;
                } else {
                    return (int) Math.pow(2, sample);
                }
            }
        }

根据计算出的采样率解码出图片并以center_crop模式生成目标图片

   private Bitmap decodeBitmap(int resourceId) {
            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = true;
            BitmapFactory.decodeResource(douYinView.get().getResources(), R.drawable.test1, options);
            int sourceWidth = options.outWidth;
            int sourceHeight = options.outHeight;
            int sample = downSample(sourceWidth, sourceHeight, targetWidth, targetHeight);
            options.inJustDecodeBounds = false;
            options.inSampleSize = sample;
            options.inPreferredConfig = Bitmap.Config.RGB_565;
            Bitmap bitmap = BitmapFactory.decodeResource(douYinView.get().getResources(), resourceId, options);
            sourceWidth = bitmap.getWidth();
            sourceHeight = bitmap.getHeight();
            //以center_crop模式生成目标图片
            float targetWidth = this.targetWidth;
            float targetHeight = this.targetHeight;
            float wRatio = targetWidth / sourceWidth;
            float hRatio = targetHeight / sourceHeight;
            float scale = Math.max(wRatio, hRatio);
            int startX = 0;
            int startY = 0;
            if (wRatio > hRatio) {
                startY = (int) ((sourceHeight - targetHeight / scale) * 0.5f);
            } else if (wRatio < hRatio) {
                startX = (int) ((sourceWidth - targetWidth / scale) * 0.5f);
            }
            matrix.setScale(scale, scale);
            bitmap = Bitmap.createBitmap(bitmap, startX, startY, (int) (targetWidth / scale), (int) (targetHeight / scale), matrix, true);
            return bitmap;
        }

准备工作做好了我们开始让这些图片显示出来吧因为我们是自定义view且是wrap_content的所以我们来看下两个比较重要的方法

• onMeasure()
• onDraw()

我们来看下onMeasure 根据当前数量计算出这个控件的width

 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(count * circleRadius * 2 - (count - 1) * overlay, circleRadius * 2);
    }

在看onDraw逻辑之前我们先来看看控制动画的参数expandRatio

     valueAnimator = ValueAnimator.ofFloat(0f, 1f);
        valueAnimator.setDuration(800);
        valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                expandRatio = (Float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationRepeat(Animator animation) {
                super.onAnimationRepeat(animation);
                currentCount++;
            }

            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                currentCount++;
            }
        });
        valueAnimator.setRepeatMode(ValueAnimator.RESTART);
        valueAnimator.setRepeatCount(count - 1);

onDraw 根据expandRatio进行绘制从而实现动画效果,这里有bitmapShader的使用Matrix的使用还有一些绘制小技巧通过canvas.save(),canvas.restore()会使得我们的逻辑清晰许多

   protected void onDraw(Canvas canvas) {
        for (int i = 0; i < currentCount; i++) {
            paint.setShader(bitmapShaders[currentCount - 1 - i]);
            if (i == 0) {
                canvas.translate(getWidth() - circleRadius, circleRadius);
                canvas.save();
                canvas.translate(-circleRadius, -circleRadius);
                matrix.setScale(expandRatio, expandRatio, circleRadius * 2, circleRadius);
                paint.getShader().setLocalMatrix(matrix);
                canvas.drawCircle(circleRadius * 2 - circleRadius * expandRatio, circleRadius, circleRadius * expandRatio, paint);
                canvas.restore();
            } else {
                canvas.save();
                paint.getShader().setLocalMatrix(null);
                canvas.translate(-((i - 1) * (circleRadius * 2 - overlay) + (circleRadius * 2 - overlay) * expandRatio), 0);
                canvas.translate(-circleRadius, -circleRadius);
                canvas.drawCircle(circleRadius, circleRadius, circleRadius, paint);
                canvas.restore();
            }
        }
    }

查看源码