Practical Transition by punchdrunker

ࣗݾ঺հ —2010೥ʙ iOS/AndroidͷΞϓϦΛॻ͍ͯΈΔ —2011೥ʙ SNS mixi(ϛΫγΟ) —2016೥ʙ Ո଒ΞϧόϜ ΈͯͶ(ϛΫγΟ) —DroidKaigiͱ͔shibuya.apkΛӡӦ

Sample code —https://github.com/punchdrunker/hocho —android-transition-examples —https://github.com/google/android-transition- examples

໨࣍ —SharedElementΛ࢖͏·ͰͷܦҢ —༻ޠղઆ —͓खຊ —جຊతͳ࢖͍͔ͨ —࣮ࡍͷΞϓϦ΁ͷద༻ —໰୊ͷղܾ๏ͱఘΊͨࣄ —·ͱΊ

ܦҢ ࣸਅҰཡը໘͔Βࣸਅͷৄࡉը໘ʹભҠͨ࣌͠ʹ... —Fling to finish(্ԼεϫΠϓͰด͡Δ)Λ࣮૷͍ͨ͠ —Ͳ͏ͤͳΒਮͳΞχϝʔγϣϯԋग़΋ग़དྷΔͱخ͍͠ —υΩϡϝϯτ௨Γʹॻ͍ͯΔͷʹಈ͔Μ!!!!1 —ॻ͍ͨ௨Γʹಈ͍ͯ·ͨ͠(൓ল) x 100 —׬શʹཧղͨ͠!! —࠳ં

༻ޠͷઆ໌(1) —Transition framework(ભҠ) —ը໘ભҠͰϨΠΞ΢τʹΞχϝʔγϣϯޮՌΛ෇͚ Δ͜ͱ΋Ͱ͖ΔϑϨʔϜϫʔΫͷ૯শ —minSdkVersion 21 —Transition —Transition ManagerʹΑͬͯ؅ཧ͞ΕΔɺ"ભ Ҡ"ͦͷ΋ͷ

༻ޠͷઆ໌(2) —SharedElement(View) —ભҠݩͱભҠઌͰܨ͗߹Θ͍ͤͨViewɻoptionͱ ͯ͠startActivityʹ౉͢ɻ —Transition name(String) —ભҠݩͱભҠઌͷViewʹಉ͡transitionNameΛ෇ ͚ΔࣄͰSharedElementͱͯ͠ೝࣝ͞ΕΔ

͓खຊʹͨ͠΋ͷ —android-transition-examples —https://github.com/google/android-transition- examples —twitterެࣜΫϥΠΞϯτ

جຊతͳ࢖͍ํ

Transitionͷύλʔϯ —Fragment to Fragment —Activity to Activity

Fragment to Fragment 1ͭͷActivity಺ͰͷભҠ͸google example͕޷ྫɻ ભҠ͢Δ࣌ͷFragmentManagerʹaddSharedElement ϝιουͰભҠݩͷImageViewͱtransitionNameΛϖ ΞͰηοτ͢Δɻ ભҠઌͰ΋ಉ༷ɻ (transitionNameͷઃఆ͸ίʔυଆ͔ΒͰ΋ϨΠΞ΢τ xml͔ΒͰ΋Մೳɻ)

Fragment to Fragment ࣮૷ྫ ImageView transitioningView = view.findViewById(R.id.card_image); fragment.getFragmentManager() .beginTransaction() .setReorderingAllowed(true) // Optimize for shared element transition .addSharedElement( transitioningView, transitioningView.getTransitionName()) .replace( R.id.fragment_container, new ImagePagerFragment(), ImagePagerFragment.class.getSimpleName()) .addToBackStack(null) .commit();

sampleͷಈ͖

Activity to Activity transitionNameΛϖΞͰઃఆ͢Δͷ͸ಉ͡ɻ startActivityͷoptionͱͯ͠ɺsharedElementΛϖΞʹ ͨ͠bundleΛ౉͢ɻ ෳ਺౉͚ͨ͠Ε͹PairܕͰՄม௕Ҿ਺ͱͯ͠౉ͤΔɻ val intent = ToActivity.createIntent(context, position) val option = ActivityOptions.makeSceneTransitionAnimation( activity, view, getString(R.string.shared_element)).toBundle() startActivity(intent, option)

࣮ࡍͷΞϓϦ΁ͷద༻ ΋ͱ΋ͱͷ࢓༷ —RecyclerViewͰࣸਅΛάϦουදࣔ —ભҠͨ͠ઌͷৄࡉը໘Ͱ͸ࠨӈʹεϫΠϓ͢Δͱࣸਅ ΛҠಈͰ͖Δ(ViewPager) —εϫΠϓͨ͠ޙʹը໘Λดͯ͡Ϧετʹ໭Δͱɺͦͷ ҐஔʹεΫϩʔϧ͍ͯ͠Δ

໰୊ͱͦͷղܾ๏ ͔͜͜Β͸αϯϓϧΛݟͳ͕Βղઆ͠·͢(item1&2&3)

AppBar/ϑολ͔ͿΔ໰୊ ্ԼʹॏͳΔView͕͋ͬͨΒεΫϩʔϧͰճආ private fun shoulScrollList(cell: View): Boolean { val cellLocation = IntArray(2) cell.getLocationOnScreen(cellLocation) val cellTop = cellLocation[1] val listLocation = IntArray(2) binding.list.getLocationOnScreen(listLocation) val diffToAppBar = cellTop - listLocation[1] val cellBottom = cellTop + binding.list.height val listBottom = listLocation[1] + binding.list.height val diffToBottom = cellBottom - listBottom return (diffToAppBar < 0 || diffToBottom > 0) }

ViewPagerͰࠔΔ͜ͱ —item4Ͱ໰୊͕ൃੜ͢Δ —ճආࡦΛitem5ͰରԠ

εϫΠϓͨ͠ޙʹ໭ΓઌͷImageViewΛมߋ͢Δʹ͸ ίʔϧόοΫͰಈతʹมߋͰ͖Δ

ViewPagerͱͷ࿈ܞ ඞਢίʔϧόοΫ —setEnterSharedElementCallback —setExitSharedElementCallback FragmentManagerΛ࢖ͬͨભҠͰ͸ɺFragmentͰར ༻ startActivityΛ࢖ͬͨભҠͰ͸ɺActivityͰར༻

ίʔϧόοΫͰԿ͕ग़དྷΔ͔ ඥ෇͘SharedElementΛಈతʹมߋͰ͖Δ setExitSharedElementCallback(object : SharedElementCallback() { // names: List, sharedElements: MutableMap override fun onMapSharedElements(names: ..., sharedElements: ...) { val viewHolder = fromFragment?.getViewHolder(newPosition) val itemView = viewHolder?.itemView ?: return val photoView = itemView.findViewById(R.id.card_photo) sharedElements[names[0]] = photoView } })

ίʔϧόοΫͷλΠϛϯά —Activity A(Ұཡ)͔ΒActivity B(ৄࡉ)ʹભҠ —AͷExitSharedElementCallback͕ݺ͹ΕΔ —BͷEnterSharedElementCallback͕ݺ͹ΕΔ —B͔ΒAʹ໭Δ —BͷEnterSharedElementCallback͕ݺ͹ΕΔ —AͷExitSharedElementCallback͕ݺ͹ΕΔ

ͳͥ? ໭Δ࣌ͷActivity Transition͸དྷͨ࣌ͷanimationΛ reverse͢Δҝ (finishAfterTransition ͋ͨΓΛಡΉͱॻ͍ͯ͋Δ)

͞ΒʹεΫϩʔϧ͕ඞཁ ఘΊͨ

No content

͞ΒͳΔ໰୊ Transition Animation ͕X?????a ܥͷ୺຤Ͱ·ͱ΋ʹ ಈ͔ͳ͔ͬͨ !

ղࢄ

FIN