需求背景分析:
產(chǎn)品和美工給了個(gè)根據(jù)專(zhuān)輯封面取主題色做背景,并且專(zhuān)輯封面還要融入背景的效果圖,一開(kāi)始看到取色覺(jué)得簡(jiǎn)單啊,不就是之前看過(guò)的palette嘛,可是專(zhuān)輯封面漸變消失融入背景怎么做呢,我們一步步分析。
1. 首先是背景取色,Palette
這個(gè)比較簡(jiǎn)單,因?yàn)橐呀?jīng)有現(xiàn)成的API讓我們調(diào)用
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
//todo
}
}
});
palette可以獲取到6種顏色,而且palette還有其他功能,這里就不介紹了,網(wǎng)上有很多案例,我們繼續(xù)。
因?yàn)楸尘吧菨u變的,由深變淺,所以要這里取出兩個(gè)顏色通過(guò)paint的shader繪制一張漸變效果的bitmap,具體代碼如下
//......省略一些
Palette.from(resource).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
//記得判空
if(palette==null)return;
//palette取色不一定取得到某些特定的顏色,這里通過(guò)取多種顏色來(lái)避免取不到顏色的情況
if (palette.getDarkVibrantColor(Color.TRANSPARENT) != Color.TRANSPARENT) {
createLinearGradientBitmap(palette.getDarkVibrantColor(Color.TRANSPARENT), palette.getVibrantColor(Color.TRANSPARENT));
} else if (palette.getDarkMutedColor(Color.TRANSPARENT) != Color.TRANSPARENT) {
createLinearGradientBitmap(palette.getDarkMutedColor(Color.TRANSPARENT), palette.getMutedColor(Color.TRANSPARENT));
} else {
createLinearGradientBitmap(palette.getLightMutedColor(Color.TRANSPARENT), palette.getLightVibrantColor(Color.TRANSPARENT));
}
}
});
//創(chuàng)建線性漸變背景色
private void createLinearGradientBitmap(int darkColor,int color) {
int bgColors[] = new int[2];
bgColors[0] = darkColor;
bgColors[1] = color;
if(bgBitmap==null){
bgBitmap= Bitmap.createBitmap(ivBg.getWidth(),ivBg.getHeight(), Bitmap.Config.ARGB_4444);
}
if(mCanvas==null){
mCanvas=new Canvas();
}
if(mPaint==null){
mPaint=new Paint();
}
mCanvas.setBitmap(bgBitmap);
mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
LinearGradient gradient=new LinearGradient(0, 0, 0, bgBitmap.getHeight(),bgColors[0],bgColors[1], Shader.TileMode.CLAMP);
mPaint.setShader(gradient);
RectF rectF=new RectF(0,0,bgBitmap.getWidth(),bgBitmap.getHeight());
// mCanvas.drawRoundRect(rectF,16,16,mPaint); 這個(gè)用來(lái)繪制圓角的哈
mCanvas.drawRect(rectF,mPaint);
ivBg.setImageBitmap(bgBitmap);
}
先給大家看看目前效果,免得枯燥
![]() image.png
|
![]() image.png
|
|---|
ok,目前背景色就實(shí)現(xiàn)到這了
2. 接著是最蛋疼的讓他漸變?nèi)谌氲奖尘吧辛?/strong>
我目前有兩種思路(兩種我都用過(guò)了,推薦第二種)
| 思路 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|
| 在圖片上面疊加一層顏色漸變的圖片 | 方便簡(jiǎn)單,只需多加一個(gè)控件 | 需要獲取旁邊背景色對(duì)應(yīng)的顏色值,這個(gè)比較難,而且我目前才用的算法獲得有時(shí)候不準(zhǔn)確 |
| 通過(guò)修改圖片的透明度來(lái)達(dá)到漸變效果 | 無(wú)需計(jì)算旁邊顏色,最終效果較佳 | 圖片較大時(shí),計(jì)算量比較大,速度較慢 |
ok,由于我最后還是采用了第二種,這里就只介紹第二種方法了,思路很簡(jiǎn)單,就是獲取圖片的bitmap數(shù)組,通過(guò)遍歷來(lái)判斷修改相應(yīng)的透明度,具體代碼如下:
//修改透明度
public static Bitmap getImageToChange(Bitmap mBitmap) {
Log.d(TAG,"with="+mBitmap.getWidth()+"--height="+mBitmap.getHeight());
Bitmap createBitmap = Bitmap.createBitmap(mBitmap.getWidth(), mBitmap.getHeight(), Bitmap.Config.ARGB_4444);
int mWidth = mBitmap.getWidth();
int mHeight = mBitmap.getHeight();
for (int i = 0; i < mHeight; i++) {
for (int j = 0; j < mWidth; j++) {
int color = mBitmap.getPixel(j, i);
int g = Color.green(color);
int r = Color.red(color);
int b = Color.blue(color);
int a = Color.alpha(color);
float index=i*1.0f/mHeight;
if(index>0.5f ){
float temp=i-mHeight/2.0f;
a= 255-(int) (temp/375*255);
}
color = Color.argb(a, r, g, b);
createBitmap.setPixel(j, i, color);
}
}
return createBitmap;
}
(ps:代碼中采用的一些寬高和數(shù)值,要看具體效果來(lái)設(shè)置,這里僅做參考!)
2.1 增加一種修改透明度的方法
該算法使用位移和模運(yùn)算來(lái)單獨(dú)修改透明值,不用把ARGB的四個(gè)顏色都取出來(lái),會(huì)比之前的速度快很多
//透明漸變
int[] argb=new int[ALBUM_SIZE*ALBUM_SIZE];
localBitmap.getPixels(argb, 0, localBitmap.getWidth(), 0, 0, localBitmap.getWidth(), localBitmap.getHeight());
//循環(huán)開(kāi)始的下標(biāo),設(shè)置從什么時(shí)候開(kāi)始改變
int start = argb.length / 2;
int mid = argb.length * 83 / 100;
int lines = ((mid - start) / localBitmap.getHeight()) + 2;
int width = localBitmap.getWidth();
for (int i = 0; i < lines; i++) {
for (int j = 0; j < width; j++) {
int index = start - width + i * width + j;
//由于默認(rèn)圖片透明色為0,所以要增加判斷,不然后續(xù)處理的顏色會(huì)變?yōu)楹谏? if(argb[index]!=0){
argb[index] = ((int) ((1 - ((float) i / lines)) * 255) << 24) | (argb[index] & 0x00FFFFFF);
}
}
}
for (int i = mid; i < argb.length; i++) {
argb[i] = (argb[i] & 0x00FFFFFF);
}
localBitmap = Bitmap.createBitmap(argb, localBitmap.getWidth(), localBitmap.getHeight(), Bitmap.Config.ARGB_8888);
(ps:算法中的數(shù)值也是僅供參考,具體還要看自己想要實(shí)現(xiàn)的效果,比如 <<24 和 0x00FFFFFF 是由于bitmap采用Config.ARGB_8888,大家根據(jù)自身需求修改就好,這里只提供思路)
2.2 適配圖片透明處理
對(duì)于原圖中帶有透明的情況,獲取像素點(diǎn)的時(shí)候透明的位置顏色值為0,所以在做透明漸變的時(shí)候要判斷一下,避免后續(xù)顏色變成黑色
if(argb[index]!=0){
argb[index] = ((int) ((1 - ((float) i / lines)) * 255) << 24) | (argb[index] & 0x00FFFFFF);
}
最終效果如下:
![]() image.png
|
![]() image.png
|
|---|
總結(jié)
本次內(nèi)容不難,重要是實(shí)現(xiàn)思路,我一開(kāi)始采用第一種疊加圖片的方法,尋找計(jì)算線性漸變某一位置的值,后來(lái)找到了但最終效果不如上述的第二種方法,但是我發(fā)現(xiàn)第二種方法在計(jì)算比較大的Bitmap的時(shí)候速度是真很慢的(遍歷一個(gè)Bitmap數(shù)組,腦殼痛),所以具體還是看大家的需求吧
(ps:好久沒(méi)寫(xiě)過(guò)文章了啊,自今年畢業(yè)來(lái)就一直忙東忙西,終于有點(diǎn)時(shí)間寫(xiě)東西了 TAT)



