0

問題

StackOverflowは初めて使うので至らないところがありますがご容赦ください。
AndroidのSharedElementで遷移前の画面と遷移後の画面をクロスフェードさせたいと考えています。

以下のサンプルGIFを見ていただけたらわかると思いますが、遷移前の画面(青ボタン)から遷移後の画面(ピンク背景)に遷移する際、ボタンを押した直後からピンク背景となってしまいます。反対に、戻る場合においてもonBackPressedがコールされた瞬間から青背景となってしまっています。つまり、遷移の間に紫?背景となるような動作をしたいと考えています。

試したこと

MaterialContainerTransformが考えていることに近いのでこちらを試してみましたが、共有要素は1つだけに限定されており、以下のような動作をしたい場合は、共有要素を外枠だけに限定しなければなりません。(以下はSampleというTextViewも共有要素に指定しています)

加えてFragment.sharedElementEnterTransitionにFadeのTransitionを指定してみましたが、ルートレイアウトのConstraintLayoutのalphaが0からフェードするだけで透過背景とはなりませんでした。

皆様のお知恵をお貸しください。よろしくお願いします。

コード

FirstFragment

class FirstFragment: Fragment(R.layout.fragment_first) {

    private var binding by autoCleared<FragmentFirstBinding>()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        binding = FragmentFirstBinding.bind(view)

        binding.button.setOnClickListener {
            findNavController().navigate(
                FirstFragmentDirections.actionFirstFragmentToSecondFragment(),
                FragmentNavigatorExtras(binding.button to binding.button.transitionName, binding.text to binding.text.transitionName)
            )
        }
    }
}

SecondFragment

class SecondFragment: Fragment(R.layout.fragment_second) {

    private var binding by autoCleared<FragmentSecondBinding>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val transition = TransitionSet().apply {
            addTransition(ChangeBounds())
            addTransition(ChangeTransform())
            addTransition(ChangeImageTransform())
        }

        sharedElementEnterTransition = transition
        sharedElementReturnTransition = transition
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        binding = FragmentSecondBinding.bind(view)
    }
}

環境

・Kotlin 1.6.21
・AndroidX Core 1.7.0
・Navigation Components 2.4.1

注意

数日経ちましたが閲覧数が少ないようですので Teratail とのマルチポストを行いました。
解決後、どちらのサイトにも解決方法を記載します。

サンプルGIF

GIF

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。