这段时间 刚学完navgition 想用activity 和fragment 中共享元素 实现过度效果 但是 目前可以正常运行 但是 没有办法实现过度效果

这是 Activity界面的 底部的这一栏 的图片是想要共享的元素

在同一个actvitiy 中放入 fragmentContainer 中放入 音乐播放界面 playfragment

这是我写的代码

//musicActivity

override fun initEvent() {
    viewModel.initPlayer(application)
    mBinding.musicItem.container.setOnClickListener {
        val playImagePair = Pair<View, String>(mBinding.musicItem.playImg,
            "playImage1")
        val extras = FragmentNavigatorExtras(playImagePair)
        val bundle = Bundle()

        if (viewModel.songDetail.value?.songCover!=null) {
            bundle.putString("imageUrl",viewModel.songDetail.value!!.songCover)
            bundle.putLong("targetId", viewModel.songDetail.value!!.songId.toLong())
        }
        
        //id代表对应的fragmentContainer ==>R.id.fragment_container_view
        //R.id.to_playFragment ==> 配置文件中的 action
        findNavController(R.id.fragment_container_view).navigate(
            R.id.activity_to_playFragment,
            bundle,
            null,
            extras
        )
        viewModel.intentState.postValue(IntentState.MUSIC)
    }
}

//playFragment

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    sharedElementEnterTransition=
        TransitionInflater.from(requireContext()).inflateTransition(R.transition.transition_music_imag)
    sharedElementReturnTransition=
        TransitionInflater.from(requireContext()).inflateTransition(R.transition.transition_music_imag)

}

xml中

//playfragment

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/playImg"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_margin="20dp"
    android:transitionName="playImage1"

    app:layout_constraintHeight_percent="0.45"
    app:layout_constraintTop_toBottomOf="@id/down_btn"
    app:shapeAppearance="@style/PlayerImgStyle" />

//musicActivity

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/playImg"
    android:layout_width="0dp"
    android:layout_height="0dp"

    android:layout_marginVertical="5dp"
    android:layout_marginLeft="28dp"
    android:padding="5dp"
    android:src="@drawable/svg_music_logo"
    app:layout_constraintBottom_toBottomOf="parent"
    android:transitionName="playImage1"

    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintHeight_percent="0.2"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.2"
    app:shapeAppearance="@style/shapeImageCircle"
    app:strokeColor="@color/black"
    app:strokeWidth="8dp" />

//musci_nav_config.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/music_nav_config"
    app:startDestination="@id/music_find">


    <fragment
        android:id="@+id/music_find"
        android:name="com.example.huangzhangmusic.fragment.bottom.FindFragment"
        android:label="FindFragment" >
        <action
            android:id="@+id/to_webViewFragment"
            app:destination="@id/webViewFragment"
            app:enterAnim="@anim/slide_from_right_to_left_in"
            app:exitAnim="@anim/slide_from_right_to_left_out"
            app:popEnterAnim="@anim/slide_from_left_to_right_in"
            app:popExitAnim="@anim/slide_from_left_to_right_out"
            />

        <action
            android:id="@+id/to_playFragment"
            app:destination="@id/playFragment"
            app:enterAnim="@anim/nav_default_enter_anim"
            app:exitAnim="@anim/nav_default_exit_anim"
            app:popEnterAnim="@anim/nav_default_pop_enter_anim"
            app:popExitAnim="@animator/nav_default_exit_anim" />


    </fragment>


    <action android:id="@+id/activity_to_playFragment"
        app:destination="@id/playFragment"
        />

</navigation>