Shared element transition问题：如何仅对共享View的可见部分执行动画

这个问题我之前做类似日程应用的时候也碰到过！核心原因是系统默认的共享元素过渡逻辑会先把ScrollView里的目标View滚动到完全可见状态，再执行动画，所以才会出现你说的“完整View先显示在内容上方，之后才动画”的突兀效果。下面给你几个具体的解决思路和代码实现，亲测有效：

1. 自定义共享元素的捕获逻辑：只取可见区域 #

我们需要重写共享元素的捕获逻辑，让系统使用View在屏幕上的可见区域而非完整Bounds来生成过渡动画的起点。以Android为例，你可以创建一个自定义的SharedElementCallback：

class PartialVisibleSharedElementCallback : SharedElementCallback() {
    override fun onCaptureSharedElements(
        sharedElementNames: MutableList<String>?,
        sharedElements: MutableList<View>?,
        sharedElementSnapshots: MutableList<View>?
    ) {
        super.onCaptureSharedElements(sharedElementNames, sharedElements, sharedElementSnapshots)
        sharedElements?.forEachIndexed { index, view ->
            // 获取View在屏幕上的可见区域
            val visibleRect = Rect()
            view.getGlobalVisibleRect(visibleRect)
            
            // 判断View是否仅部分可见
            if (!visibleRect.contains(0, 0, view.width, view.height)) {
                // 创建仅包含可见区域的快照View
                val visibleBitmap = Bitmap.createBitmap(
                    visibleRect.width(),
                    visibleRect.height(),
                    Bitmap.Config.ARGB_8888
                )
                val canvas = Canvas(visibleBitmap)
                // 平移画布，只绘制可见部分
                canvas.translate(-visibleRect.left.toFloat(), -visibleRect.top.toFloat())
                view.draw(canvas)
                
                val snapshotView = ImageView(view.context).apply {
                    setImageBitmap(visibleBitmap)
                    layoutParams = ViewGroup.LayoutParams(visibleRect.width(), visibleRect.height())
                    // 设置快照在屏幕上的位置，和原View的可见区域完全重合
                    val location = IntArray(2)
                    view.getLocationOnScreen(location)
                    x = location[0] + visibleRect.left.toFloat()
                    y = location[1] + visibleRect.top.toFloat()
                }
                
                // 用快照替换原View参与过渡
                sharedElementSnapshots?.add(snapshotView)
                sharedElements.removeAt(index)
            }
        }
    }
}

然后在你的列表页面（包含ScrollView的页面）中设置这个回调：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 为退出过渡设置自定义回调
    setExitSharedElementCallback(PartialVisibleSharedElementCallback())
}

2. 禁用系统自动滚动行为 #

默认情况下，系统会自动把ScrollView里的共享元素滚动到完全可见位置，我们需要关掉这个行为，避免过渡前的突兀滚动：

在启动详情页的时候，使用ActivityOptions配置过渡选项，开启sharedElementsUseOverlay：

val eventView = findViewById<View>(R.id.your_event_view)
val transitionName = "event_${event.id}" // 确保和详情页的transitionName一致
val options = ActivityOptions.makeSceneTransitionAnimation(
    this,
    Pair(eventView, transitionName)
).apply {
    // 禁用自动滚动，让共享元素在原可见位置开始动画
    sharedElementsUseOverlay = true
}
startActivity(intent, options.toBundle())

3. 调整详情页的过渡起始状态 #

在详情页中，我们要让过渡动画的起始状态匹配原View的可见区域，而不是原View的完整大小。同样通过SharedElementCallback来调整：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setEnterSharedElementCallback(object : SharedElementCallback() {
        override fun onSharedElementStart(
            sharedElementNames: MutableList<String>?,
            sharedElements: MutableList<View>?,
            sharedElementSnapshots: MutableList<View>?
        ) {
            super.onSharedElementStart(sharedElementNames, sharedElements, sharedElementSnapshots)
            sharedElements?.firstOrNull()?.let { detailView ->
                // 用快照的尺寸和位置作为过渡的起始状态
                sharedElementSnapshots?.firstOrNull()?.apply {
                    detailView.layoutParams.width = width
                    detailView.layoutParams.height = height
                    detailView.x = x
                    detailView.y = y
                    detailView.requestLayout()
                }
            }
        }
    })
}

关键思路总结 #

• 核心是用可见区域的快照替代原View参与过渡，避免系统强制滚动显示完整View
• 禁用自动滚动行为，让动画从用户看到的可见位置开始
• 让详情页的过渡起始状态和可见区域完全匹配，保证动画平滑自然

内容的提问来源于stack exchange，提问作者Oscar Méndez