如何使用焦点元素实现共享元素过渡答案

【问题标题】：How to implement shared element transition with focal element如何使用焦点元素实现共享元素过渡
【发布时间】：2018-12-04 22:23:49
【问题描述】：

我想在我的应用程序中实现共享元素转换，当一个活动的回收器视图项转换为另一个活动时，如下所示：https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F15N3n1xwTt0briEbfIvFUG01pMv2d_xaT%2F02-focus-focalelement-do.mp4。（来源：https://material.io/design/motion/choreography.html#using-a-focal-element）

也就是说，该项目正在淡出并更改边界，然后新活动淡入。据我所知，它是简单的 AutoTransition，但它不起作用。简单的淡入淡出也不起作用。

因此，目前我只实现了该项目获取新活动的背景，然后更改其边界。

【问题讨论】：

标签： android shared-element-transition

【解决方案1】：

所以，我最终在生成的活动布局中添加了回收站视图项的布局。被点击项目的数据（例如标题等）被转移到带有intent.putExtra()的下一个活动。在这种情况下，共享元素当然是项目的根视图和生成的活动的根视图。当活动开始时，我通过 SharedElementCallback 将项目的数据设置为活动中的匹配视图，例如：

setEnterSharedElementCallback(
                object : SharedElementCallback() {
                    override fun onSharedElementStart(...) {
                       val title = intent.getStringExtra(TITLE)                      
                       activity_item_title.text = title
                       ........
                    }

                    override fun onSharedElementEnd(...) {
                    }
                })

这允许在过渡开始时显示完全相同的项目视图。然后它应该开始改变它的边界，同时淡出这个项目的视图。并且在某个时刻（例如在过渡的中间）当初始视图完全淡出时，活动的 laouyt 出现，逐渐淡入。为此，我们需要在过渡的中间隐藏项目的视图 (View.visibility = View.GONE) 并使活动视图可见。可能这不是最好的方法，但我通过向共享元素输入转换添加侦听器来解决这个问题并使用Handler().postDelayed：

window.sharedElementEnterTransition.addListener(
            object : android.transition.Transition.TransitionListener {
                override fun onTransitionEnd(transition: Transition) {}

                override fun onTransitionResume(transition: Transition) {}

                override fun onTransitionPause(transition: Transition) {}

                override fun onTransitionCancel(transition: Transition) {}

                override fun onTransitionStart(transition: Transition) {  
                        Handler().postDelayed({
                            activity_item.visibility = View.GONE

                            activity_view_1.visibility = View.VISIBLE
                            activity_view_2.visibility = View.VISIBLE
                            .............
                            .............
                            // Also you could e.g. set the background to your activity here, ets.
                            activity_view_root.background = backgroundDrawable 

                        }, 150)  //suppuse that the whole transition length is 300ms
                    }
                }
            })

过渡动画本身可能如下所示：

<transitionSet>
    <targets>
        <target android:targetId="@id/activity_root_view"/>
    </targets>
    <transition
        class="com.organization.app.utils.FadeOutTransition"
        android:duration="150"/>
    <transition
        class="com.organization.app.utils.FadeInTransition"
        android:startDelay="150"/>
    <changeBounds android:duration="300"/>
</transitionSet>

这里使用了自定义 FadeOutTransition 和 FadeInTransition，因为简单的 android <fade/> 动画不适用于共享元素。这些类与此处答案中给出的类相似：Why Fade transition doesn't work on Shared Element。

创建返回转换的步骤类似。

【讨论】：