Android共享元素动画显示

时间:2022-05-23 GG_Jin 人气:0

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的情况下，发现不是正常的平移动画，而是先显示一个小的图片然后再渐渐隐藏，然后新界面的大图片再渐渐显示，动画效果明显不对啊。

官方文档

要在具有一个共享元素的两个 Activity 之间添加屏幕过渡动画，请执行以下操作：

在主题背景中启用窗口内容过渡。
在样式中指定共享元素过渡。
将过渡定义为 XML 资源。
使用 android:transitionName 属性为两个布局中的共享元素指定一个通用名称。
使用 ActivityOptions.makeSceneTransitionAnimation() 函数。

解决流程

百度了一下看看有没有人遇到类似的问题，但是并没有。也对应修改了一下style主题什么的，也没有什么作用。最后想了想，又新建了一个项目，写个demo测试了一下，上面的自己写的代码并没有上面问题，既然没有问题，那就是项目代码里面有问题了，和demo最大的区别就是项目里有网络请求，以及图片加载的操作。确定了不确定的地方那就试试看。

supportPostponeEnterTransition()

supportStartPostponedEnterTransition()

一个暂停的方法，一个开始动画的方法，一进入就暂停动画，网络请求或者图片加载结束后开始动画，搞定问题。最后看效果。

ok解决收工

总结

加载全部内容