解決Glide4.x上的crossFade無法生效

問題出現(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)還是不難理解

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市雁比,隨后出現(xiàn)的幾起案子稚虎,更是在濱河造成了極大的恐慌,老刑警劉巖偎捎,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蠢终,死亡現(xiàn)場離奇詭異,居然都是意外死亡茴她,警方通過查閱死者的電腦和手機寻拂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來丈牢,“玉大人祭钉,你說我怎么就攤上這事雹锣∨剌铮” “怎么了届搁?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵搔课,是天一觀的道長泛粹。 經(jīng)常有香客問我遂铡,道長,這世上最難降的妖魔是什么晶姊? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任扒接,我火速辦了婚禮,結(jié)果婚禮上们衙,老公的妹妹穿的比我還像新娘钾怔。我一直安慰自己,他們只是感情好蒙挑,可當(dāng)我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布宗侦。 她就那樣靜靜地躺著,像睡著了一般忆蚀。 火紅的嫁衣襯著肌膚如雪矾利。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天馋袜,我揣著相機與錄音男旗,去河邊找鬼。 笑死欣鳖,一個胖子當(dāng)著我的面吹牛察皇,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播泽台,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼什荣,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了怀酷?” 一聲冷哼從身側(cè)響起稻爬,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎胰坟,沒想到半個月后因篇,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡笔横,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年竞滓,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片吹缔。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡商佑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出厢塘,到底是詐尸還是另有隱情茶没,我是刑警寧澤肌幽,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站抓半,受9級特大地震影響喂急,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜笛求,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一廊移、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧探入,春花似錦狡孔、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至植旧,卻和暖如春辱揭,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背隆嗅。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工界阁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人胖喳。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓泡躯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親丽焊。 傳聞我的和親對象是個殘疾皇子较剃,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容