問題出現(xiàn)場景
因為舊項目用的是Glide4.0单匣,新項目升級到Glide4.8以后,加載的漸變效果crossFade在部分組件失效(RoundImageView,然而實際上在我一開始網(wǎng)上搜索的時候,大部分人遇到這個情況也是在這個View上)
結(jié)果差異
- 普通ImageView漸變效果仍然生效
- RoundImageView以及部分自定義View失效
CrossFade的作用過程
glide設(shè)置圖片到目標(biāo)ImageView
@Override
public void onResourceReady(@NonNull Z resource, @Nullable Transition<? super Z> transition) {
if (transition == null || !transition.transition(resource, this)) {
setResourceInternal(resource);
} else {
maybeUpdateAnimatable(resource);
}
}
按照上面的代碼transition.transition去尋找CrossFade的代碼狂魔,發(fā)現(xiàn)在DrawableCrossFadeTransition這個類中
@Override
public boolean transition(Drawable current, ViewAdapter adapter) {
Drawable previous = adapter.getCurrentDrawable();
if (previous == null) {
previous = new ColorDrawable(Color.TRANSPARENT);
}
TransitionDrawable transitionDrawable =
new TransitionDrawable(new Drawable[] { previous, current });
transitionDrawable.setCrossFadeEnabled(isCrossFadeEnabled);
transitionDrawable.startTransition(duration);
adapter.setDrawable(transitionDrawable);
return true;
}
乍一看椎咧,沒有任何問題,構(gòu)建了一個TransitionDrawable挖藏,里面有目標(biāo)資源和一個透明的Drawable暑刃,ImageView在繪制的時候,會讓TransitionDrawable通過切換他的兩個Drawable的alpha值來達到漸變的效果
上面說了crossFade在我的項目存在差異膜眠,系統(tǒng)的ImageView是生效的岩臣,自定義的則失效溜嗜,Glide的源碼好像又沒什么問題,那問題肯定出在了自定義View上架谎,那么就復(fù)盤自己自定義的View(以下均已RoundImageView為例)
- 大家都知道要展示一個圓形的圖片炸宵,從兩方面著手,要么去處理Drawable谷扣,要么去處理View(別問為什么Glide自帶處理Drawable土全,還要用RoundImageView,問就是自有用處)
處理View的方法
- canvas.clipPath
- canvas.drawCircle+paint.setShader
- canvas.drawBitmap+paint.setXfermode+canvas.drawCircle
處理Drawable的方法就不談了,因為我是在View里處理(懶~的貼)会涎,采用了上述的第二種方法
RoundImageView里對資源的處理
private Bitmap getBitmapFromDrawable(Drawable drawable) {
if (drawable == null) {
return null;
}
if (drawable instanceof BitmapDrawable) {
return ((BitmapDrawable) drawable).getBitmap();
}
try {
Bitmap bitmap;
if (drawable instanceof ColorDrawable) {
bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
} else {
bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_CONFIG);
}
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
獲取當(dāng)前的Drawable裹匙,構(gòu)建一個Bitmap作為Shader來為paint著色,結(jié)合上面說的Glide返回的是一個TransitionDrawable在塔,可知道得到的Shader獲取的總是TransitionDrawable的第一個資源也就是那個透明Drawable幻件,造成了CrossFade的失效
查看GitHub的版本更迭
可以看到在歷史版本中,當(dāng)previous為空的時候蛔溃,也就是第一次設(shè)置圖片的時候绰沥,其實是調(diào)用defaultAnimation.transition(current, adapter)來完成漸變的效果,這也解釋了為什么我在glide4.0的時候漸變還是正常的贺待,升級到4.8以后就部分失效的原因
解決方案
既然知道了Glide的版本變遷徽曲,想用回舊版本的漸變效果,只需要照貓畫虎模仿就OK了
@Override
public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
if (iv instanceof RoundImageView && iv.getTag(R.id.view_glide_animate) == null) {
iv.clearAnimation();
AlphaAnimation animation = new AlphaAnimation(0F, 1F);
animation.setDuration(300);
iv.startAnimation(animation);
iv.setTag(R.id.view_glide_animate, true);
}
return false;
}
在Glide加載的回調(diào)中統(tǒng)一處理為AlphaAnimation顯示漸變
后續(xù)
其實這個問題在網(wǎng)上掛了一大堆麸塞,我也查找過程也一一看了不少秃臣,都沒有一個很好的解釋或者良好的解決方案(也許是我查的姿勢不對?)哪工,實際上只要稍微看一下源碼奥此,發(fā)現(xiàn)還是不難理解