記一次Android共享元素動畫效果顯示有問題

語言: CN / TW / HK

bug描述

設計同學想搞一個點選圖片item,item內的圖片移動到新頁面的圖片位置的效果,一想就是共享元素就能搞定啊。

``` companion object { fun gotoDetail( context: Activity, dynamicId: String?, jumpComment: Boolean = false, shareElement: Boolean = false, imageView: ImageView? = null, nameView: TextView? = null, avatarView: ImageView? = null, ) { LogUtils.w(shareElement) if (shareElement) { val intent = Intent(context, HomeDynamicDetailAcitvity::class.java) intent.putExtra("dynamicId", dynamicId ?: "") intent.putExtra("jumpComment", jumpComment) intent.putExtra("shareElement", shareElement) val options = ActivityOptions .makeSceneTransitionAnimation( context, UtilPair.create(imageView, context.getString(R.string.dynamic_start_top_image)), UtilPair.create(avatarView, context.getString(R.string.dynamic_start_avatar)), UtilPair.create(nameView, context.getString(R.string.dynamic_start_name)) ) // val options = ActivityOptions.makeSceneTransitionAnimation(context, imageView, context.getString(R.string.dynamic_start_top_image))

            // start the new activity
            ActivityCompat.startActivity(context, intent, options.toBundle())
        } else {
            val params = HashMap<String, Any>()
            params["dynamicId"] = dynamicId ?: ""
            params["jumpComment"] = jumpComment
            context.toActivity(RoutePath.HOME_DYNAMIC_DETAIL, params)

        }
    }
}

```

結果按照文件寫了一下,但是效果卻有問題。通過把動畫時長放到5x的情況下,發現不是正常的平移動畫,而是先顯示一個小的圖片然後再漸漸隱藏,然後新介面的大圖片再漸漸顯示,動畫效果明顯不對啊。

共享元素不正常.gif

官方文件

要在具有一個共享元素的兩個 Activity 之間新增螢幕過渡動畫,請執行以下操作:

\

  1. 在主題背景中啟用視窗內容過渡。
  2. 在樣式中指定共享元素過渡。
  1. 將過渡定義為 XML 資源。
  2. 使用 android:transitionName 屬性為兩個佈局中的共享元素指定一個通用名稱。
  1. 使用 ActivityOptions.makeSceneTransitionAnimation() 函式。

解決流程

百度了一下看看有沒有人遇到類似的問題,但是並沒有。也對應修改了一下style主題什麼的,也沒有什麼作用。最後想了想,又新建了一個專案,寫個demo測試了一下,上面的自己寫的程式碼並沒有上面問題,既然沒有問題,那就是專案程式碼裡面有問題了,和demo最大的區別就是專案裡有網路請求,以及圖片載入的操作。確定了不確定的地方那就試試看。

supportPostponeEnterTransition()

supportStartPostponedEnterTransition()

一個暫停的方法,一個開始動畫的方法,一進入就暫停動畫,網路請求或者圖片載入結束後開始動畫,搞定問題。最後看效果。

共享元素正常.gif

ok解決收工