آشنایی با متریال دیزاین موشن در اندروید — از صفر تا صد

1    private fun buildContainerTransform() =
2        MaterialContainerTransform().apply {
3            addTarget(binding.coordinator)
4            duration = 500
5            fadeMode = MaterialContainerTransform.FADE_MODE_IN
6            interpolator = FastOutSlowInInterpolator()
7        }

1    private fun buildContainerTransformation() =
2        MaterialContainerTransform().apply {
3            scrimColor = Color.TRANSPARENT
4            duration = 300
5            interpolator = FastOutSlowInInterpolator()
6            fadeMode = MaterialContainerTransform.FADE_MODE_IN
7        }           
8
9
10    private fun setClickListeners() {
11        binding.floatingActionButton.setOnClickListener {
12            val transition = buildContainerTransformation()
13
14            transition.startView = binding.floatingActionButton
15            transition.endView = binding.card
16
17            transition.addTarget(binding.card)
18
19            TransitionManager.beginDelayedTransition(findViewById(android.R.id.content), transition)
20            binding.card.visibility = View.VISIBLE
21            binding.fabScrim.visibility = View.VISIBLE
22
23            binding.floatingActionButton.visibility = View.INVISIBLE
24        }
25    }

1    private fun buildContainerTransform() =
2        MaterialContainerTransform().apply {
3            addTarget(binding.coordinator)
4            setAllContainerColors(MaterialColors.getColor(binding.root, R.attr.colorSurface))
5            pathMotion = MaterialArcMotion()
6            duration = 500
7            interpolator = FastOutSlowInInterpolator()
8            fadeMode = MaterialContainerTransform.FADE_MODE_IN
9        }

1    inner class ViewHolder(val binding: ItemNoteBinding) : RecyclerView.ViewHolder(binding.root) {
2        fun bind(note: Note) {
3            binding.note = note
4            binding.noteCard.transitionName = note.id.toString()
5            binding.noteCard.setOnClickListener {
6                noteClickListener.onNoteClick(note.id, binding.noteCard)
7            }
8        }
9    }

1        val adapter = NotesAdapter(notes)
2        adapter.noteClickListener = object : NotesAdapter.NoteClickListener {
3            override fun onNoteClick(id: Int, noteCard: MaterialCardView) {
4                val intent = Intent(this@NotesActivity, NoteDetailActivity::class.java)
5                val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
6                    this@NotesActivity, noteCard, id.toString()
7                )
8                intent.putExtra("noteId", id)
9                startActivity(intent, options.toBundle())
10            }
11        }

1class NoteDetailActivity : AppCompatActivity() {
2    private lateinit var binding: NoteDetailActivityBinding
3
4    override fun onCreate(savedInstanceState: Bundle?) {
5        window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
6        binding = NoteDetailActivityBinding.inflate(layoutInflater)
7        val noteId = intent.getIntExtra("noteId", 0)
8        val note = notes.find { it.id == noteId }
9        binding.note = note
10        binding.coordinator.transitionName = noteId.toString()
11        setEnterSharedElementCallback(MaterialContainerTransformSharedElementCallback())
12        window.sharedElementEnterTransition = buildContainerTransform()
13        window.sharedElementReturnTransition = buildContainerTransform()
14        setContentView(binding.root)
15        super.onCreate(savedInstanceState)
16    }
17
18    private fun buildContainerTransform() =
19        MaterialContainerTransform().apply {
20            addTarget(binding.coordinator)
21            duration = 300
22            interpolator = FastOutSlowInInterpolator()
23            fadeMode = MaterialContainerTransform.FADE_MODE_IN
24        }
25}

1        val adapter = AlbumsAdapter(albums, requireContext())
2        adapter.albumClickListener = object : AlbumsAdapter.AlbumClickListener {
3            override fun onAlbumClick(id: Int, cardView: MaterialCardView) {
4                val extras = FragmentNavigatorExtras(
5                    cardView to id.toString()
6                )
7                val action = AlbumsFragmentDirections.navToAlbumFragment(id)
8                findNavController().navigate(action, extras)
9            }
10        }

1    override fun onCreate(savedInstanceState: Bundle?) {
2        super.onCreate(savedInstanceState)
3        sharedElementEnterTransition = buildContainerTransform()
4        sharedElementReturnTransition = buildContainerTransform()
5    }
6
7    private fun buildContainerTransform() =
8        MaterialContainerTransform().apply {
9            drawingViewId = R.id.nav_host_fragment
10            interpolator = FastOutSlowInInterpolator()
11            containerColor = Color.WHITE
12            fadeMode = MaterialContainerTransform.FADE_MODE_OUT
13            duration = 300
14        }

1                val forward = true
2                val fragment = MyFragment.newInstance()
3                // axis: MaterialSharedAxis.X, Y or Z
4                // forward: true if it move in the forward direction or false if it move in the backward direction
5                fragment.enterTransition = MaterialSharedAxis(MaterialSharedAxis.Y, forward)
6                supportFragmentManager
7                    .beginTransaction()
8                    .replace(R.id.fragment_container, fragment)
9                    .commit()

1class ArtistsFragment : Fragment() {
2
3    override fun onCreate(savedInstanceState: Bundle?) {
4        super.onCreate(savedInstanceState)
5        enterTransition = MaterialFadeThrough()
6    }
7  
8    ...
9}

1// import androidx.transition.TransitionManager        
2        
3        binding.floatingActionButton.post {
4            val transition = MaterialFade().apply {
5                duration = 1500
6            }
7            TransitionManager.beginDelayedTransition(binding.root, transition)
8            binding.floatingActionButton.visibility = View.VISIBLE
9        }