背景
最近公司的ui帅哥提了一个需求,需要在滑动banner的时候,平滑修改banner后面的图片背景。先上效果(就是最后的实现效果)
![](https://img.haomeiwen.com/i3571184/33bcb75416ebb963.gif)
实现思路大致有如下几个
-
再写一个 ViewPager 两个ViewPager 进行联动
放弃:调研后发现 联动并不好实现而且 我们的banner是使用封装好的库,替换其内部的ViewPager 并不容易 ,放弃 -
使用两个ImageView , banner 滑动过程中不断 更改两个图片的透明度就可以实现需求
不选择原因:- 因为layout文件中需要两个ImageView
- 有点low而且没必要(捂嘴笑)
-
最后选择了 使用代码将两张图片和为一张然后使用一个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的操作过程。
网友评论