robin12210325/activationcard

从未见过如此美丽动人的CardView

故事还得从看到那张动图说起。

像往常一样，休息时间我都会打开uplabs浏览一下国外大佬们的UI设计。

有个设计十分吸引眼球，就是下图。

仔细看每张图片，在加载出来的时候背景都会有一个偏移的动效，简约而不简单。

这个能实现吗？如果公司UI团队给了这么一个效果图，你该咋办？

思路

首先说说思路，既然要做，显得有个载体吧，可能很多同学一下子就想到了ImageView这个东西。但现在是设么年代了？Material Design的呀，所以再用ImageView是不是有点low了。所以自然想到就应该是CardView嘛。

但CardView有个蛋疼的设定，不能设置背景图片，不知道小伙伴们发现了没有？

stackoverflow上的答案过于简单粗暴，不是我的菜。

既然不用这种方法，那我们只能使用我们的神器onDraw了，从根本上解决问题。

代码

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if ((tobePaint!=null&&!tobePaint.isRecycled())) {
            canvas.drawBitmap(tobePaint, backgroundSubRec, backgroundRec, paint);
        }
    }

onDraw方法很简单，就是当有可绘制背景的时候就去绘制。

这里有四个变量要关注一下：

• tobePaint: 需要被绘制的Bitmap对象。
• backgroundSubRec：Rect对象，表示Bitmap中需要被绘制的区域。后续就是通过改变这个变量来达到动画效果。
• backgroundRec：Rect对象，表示绘制区域的大小，大小同CardView的大小。

最开始我们自定义的这个视图与普通的CardView没有差异，当调用完public void enableActivation(Bitmap activationBg, String key)这个方法后，背景就被绘制上去了，如下图。

来看看代码

    public void enableActivation(Bitmap activationBg, String key) {
        currentKey = key;
        isActivation = false;
        init(activationBg,key);
    }

具体看init这个方法：

private void init(final Bitmap originBitmap,final String key) {
        getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                getViewTreeObserver().removeOnPreDrawListener(this);
                Executors.newSingleThreadExecutor().execute(new Runnable() {
                    @Override
                    public void run() {
                        w = getWidth();
                        h = getHeight();

                        int scaledW = (int) (w * bgScale);
                        int scaledH = (int) (h * bgScale);

                        double preSH = 1.0 * originBitmap.getHeight() / scaledH;
                        double preSW = 1.0 * originBitmap.getWidth() / scaledW;

                        float smallPreS = (float) Math.min(preSH, preSW);

                        Matrix matrix = new Matrix();
                        float s = 1 / smallPreS;
                        matrix.postScale(s, s);
                        if(sIsEnableCache){
                            background = sCache.get(key);
                            if(background == null){
                                background = Bitmap.createBitmap(originBitmap, 0, 0, originBitmap.getWidth(), originBitmap.getHeight(), matrix, true);
                                sCache.put(key,background);
                            }
                        }else {
                            background = Bitmap.createBitmap(originBitmap, 0, 0, originBitmap.getWidth(), originBitmap.getHeight(), matrix, true);
                        }


                        defaultLeft = (background.getWidth() - w) / 2;
                        defaultTop = (background.getHeight() - h) / 2;
                        backgroundRec = new Rect(0, 0, w, h);
                        backgroundSubRec = new Rect(defaultLeft, defaultTop, w + defaultLeft, h + defaultTop);
                        currentPosition = POSITION_CENTER;
                        tobePaint = background;
                        Log.d("scott"," key = " + key + "    current key = " + currentKey);
                        if(key.equals(currentKey)){
                            handler.post(new Runnable() {
                                @Override
                                public void run() {
                                    invalidate();
                                    isActivation = true;
                                }
                            });
                        }

                    }
                });

                return true;
            }
        });
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        invalidate();
    }

这个方法做了这么几件事：

• 确定CardView的长宽。
• 根据CardView的实际大小对传入的Bitmap进行适当放大，为后续动画做准备。
• 确定backgroundRec，backgroundSubRec这两个对象的值。
• 给tobePaint对象赋值。
• 调用invalidate()绘制背景。

为了方便理解，我画了如下这张图。

下面是动画部分，这部分。

先来说说原理，上面绘制的图像是靠backgroundSubRec对tobePaint进行截取而来的，一开始backgroundSubRec截取的是放大后tobePaint的中间部分，其大小和CardView一致，接着通过不断的改变backgroundSubRec的值，让其慢慢向右移动。来截取tobePaint的右边部分。

下面是代码：

public void postRight() {

        if (!isActivation) {
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    postRight();
                }
            }, 1000 / 60);
            return;
        }

        if (currentPosition == POSITION_INVAL || currentPosition == POSITION_RIGHT) {
            Log.d("scott", "current position is already right");
            return;
        }

        currentPosition = POSITION_INVAL;
        final int delta = defaultLeft * 2 - backgroundSubRec.left;
        int tempStep = delta / animationDuration;
        if (tempStep == 0) tempStep = 1;
        final int step = tempStep;
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                if(!isActivation) return;
                invalidate();
                if (backgroundSubRec.left < defaultLeft * 2) {
                    backgroundSubRec.left += step;
                    backgroundSubRec.right += step;
                    handler.postDelayed(this, fps);
                } else {
                    currentPosition = POSITION_RIGHT;
                }
            }
        }, fps);
    }

最后是效果图。

最后

虽然上面讲的比较简单，其实在这过程中有一些细节还是需要注意的，比如bitmap的格式最好使用RGB_565来减少内存占用，使用LruCahce来缓存Bitmap增加背景切换速度，还有就是背景放大的比例也需要根据实际需求做调整。

下面给出代码，

github