两张照片修改透明度后混合为一张(实现图片切换效果)

背景

最近公司的ui帅哥提了一个需求,需要在滑动banner的时候,平滑修改banner后面的图片背景。先上效果(就是最后的实现效果)


SM-N9500_20200612182719 (1).gif

实现思路大致有如下几个

  1. 再写一个 ViewPager 两个ViewPager 进行联动
    放弃:调研后发现 联动并不好实现而且 我们的banner是使用封装好的库,替换其内部的ViewPager 并不容易 ,放弃

  2. 使用两个ImageView , banner 滑动过程中不断 更改两个图片的透明度就可以实现需求
    不选择原因:

    1. 因为layout文件中需要两个ImageView
    2. 有点low而且没必要(捂嘴笑)
  3. 最后选择了 使用代码将两张图片和为一张然后使用一个ImageView 进行显示。具体合成代码如下
    提示:图片合成并不耗时只需要 不到20ms就可以完成(之前一直担心耗时导致 卡顿)。

 /**
     * 修改 两张图片 透明度 并混合为 一张图片
     *
     * @param first  刚开始主要展示 图片
     * @param secend 第二种图
     * @param aPerc  alpha 百分比
     * @return
     */
    public static Bitmap combineBitmap(Bitmap first, Bitmap secend, @FloatRange(from = 0, to = 1) float aPerc) {
        if (aPerc < 0) aPerc = 0;
        if (aPerc > 1) aPerc = 1;

        long start = new Date().getTime();

        int firstWidth = first.getWidth();
        int firstHeight = first.getHeight();

        int secendWidth = secend.getWidth();
        int secendHeight = secend.getHeight();

        if (firstWidth != secendWidth || firstHeight != secendHeight) {
            return null;
        }
        int bufferSize = firstWidth * firstHeight;
        int[] firstCopy = new int[bufferSize];
        int[] secendCopy = new int[bufferSize];

        first.copyPixelsToBuffer(IntBuffer.wrap(firstCopy));
        secend.copyPixelsToBuffer(IntBuffer.wrap(secendCopy));
        int[] colorBuffer = new int[bufferSize];

        for (int i = 0; i < bufferSize; i++) {
            int A = (int) ((firstCopy[i] >> 24 & 0xFF) * aPerc + ((secendCopy[i] >> 24 & 0xFF) * (1 - aPerc)));
            int R = (int) ((firstCopy[i] & 0xFF) * aPerc + ((secendCopy[i] & 0xFF) * (1 - aPerc)));
            int G = (int) ((firstCopy[i] >> 8 & 0xFF) * aPerc + ((secendCopy[i] >> 8 & 0xFF) * (1 - aPerc)));
            int B = (int) ((firstCopy[i] >> 16 & 0xFF) * aPerc + ((secendCopy[i] >> 16 & 0xFF) * (1 - aPerc)));

            colorBuffer[i] = Color.argb(A, R, G, B);
        }

        long end = new Date().getTime();

        LogUtil.e("耗时= " + (end - start));

        return Bitmap.createBitmap(colorBuffer, firstWidth, firstHeight, Bitmap.Config.ARGB_8888);
    }

其实实现出来并不麻烦,写这篇文章主要是 为了 记录两个BitMap的操作过程。

你可能感兴趣的:(两张照片修改透明度后混合为一张(实现图片切换效果))