快捷導(dǎo)航

Android共享元素動畫效果顯示問題解決

更新時(shí)間：2022年02月09日 16:06:48 作者：GG_Jin

什么是共享元素呢?可以理解為當(dāng)頁面跳轉(zhuǎn)是,看起來一個(gè)View屬于界面A又屬于界面B,下面這篇文章主要給大家介紹了關(guān)于Android共享元素動畫效果顯示問題的相關(guān)資料,需要的朋友可以參考下

bug描述

設(shè)計(jì)同學(xué)想搞一個(gè)點(diǎn)擊圖片item，item內(nèi)的圖片移動到新頁面的圖片位置的效果，一想就是共享元素就能搞定啊。

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)

            }
        }
    }

結(jié)果按照文檔寫了一下，但是效果卻有問題。通過把動畫時(shí)長放到5x的情況下，發(fā)現(xiàn)不是正常的平移動畫，而是先顯示一個(gè)小的圖片然后再漸漸隱藏，然后新界面的大圖片再漸漸顯示，動畫效果明顯不對啊。

官方文檔

要在具有一個(gè)共享元素的兩個(gè) Activity 之間添加屏幕過渡動畫，請執(zhí)行以下操作：

\

在主題背景中啟用窗口內(nèi)容過渡。
在樣式中指定共享元素過渡。
將過渡定義為 XML 資源。
使用 android:transitionName 屬性為兩個(gè)布局中的共享元素指定一個(gè)通用名稱。
使用 ActivityOptions.makeSceneTransitionAnimation() 函數(shù)。

解決流程

百度了一下看看有沒有人遇到類似的問題，但是并沒有。也對應(yīng)修改了一下style主題什么的，也沒有什么作用。最后想了想，又新建了一個(gè)項(xiàng)目，寫個(gè)demo測試了一下，上面的自己寫的代碼并沒有上面問題，既然沒有問題，那就是項(xiàng)目代碼里面有問題了，和demo最大的區(qū)別就是項(xiàng)目里有網(wǎng)絡(luò)請求，以及圖片加載的操作。確定了不確定的地方那就試試看。

supportPostponeEnterTransition()

supportStartPostponedEnterTransition()

一個(gè)暫停的方法，一個(gè)開始動畫的方法，一進(jìn)入就暫停動畫，網(wǎng)絡(luò)請求或者圖片加載結(jié)束后開始動畫，搞定問題。最后看效果。