dubbo使用mdc_用mdc进行物质运动

dubbo使用mdc

This article is also posted on the Material Design blog.

本文还发布在 Material Design博客上 。

The Material motion system, recently released as part of the MDC-Android library (v 1.2.0), distills common transitions into a group of simple patterns for a smoother, more understandable user experience. Material motion currently includes of four transitions:

材质运动系统 (最近作为MDC-Android库(v 1.2.0)的一部分发布)将常见的转换提取为一组简单的模式，以提供更流畅，更易理解的用户体验。 物质运动当前包括四个过渡：

• Container transform

  容器转换

• Shared axis

  共享轴

• Fade through

  淡入淡出

• Fade

  褪色

We’ve implemented these transitions on top of the Android platform & AndroidX Transition system so they can easily be used when moving between Activities, Fragments, and Views.

我们已在Android平台和AndroidX过渡系统的顶部实现了这些过渡，以便在“活动”，“片段”和“视图”之间移动时可以轻松使用它们。

This post introduces each pattern and explains how to add them to your app. I’ll illustrate each step by implementing it for our example app Reply, a simple and easy-to-use email client. Three of the app’s flows will get the motion transitions: opening an email, opening the search page, and switching mailboxes.

这篇文章介绍了每种模式，并说明了如何将它们添加到您的应用程序。 我将通过为示例应用程序Reply (一个简单易用的电子邮件客户端)实现该步骤来说明每个步骤。 该应用程序的三个流程将获得动作转换： 打开电子邮件，打开搜索页面以及切换邮箱 。

If you’re more of a hands-on learner and want to get right into the code, then consider doing the Material motion codelab, which lets you practice these techniques by executing each step as you go along. It also includes additional info about using these transitions on Android.

如果您是一个动手学习者，并且想直接学习代码，那么可以考虑进行Material motion代码实验室 ，它可以让您通过逐步执行每个步骤来练习这些技术。 它还包括有关在Android上使用这些转换的其他信息。

容器转换：打开电子邮件 (Container transform: Opening an email)

The “hero” of transitions, container transform is used when one thing turns into another thing. What does this mean? Examples include a list item that expands into a details page, a FAB that morphs into a toolbar, or a chip that expands into a floating card. In each case there is one component transforming into another, maintaining a shared “outer” container while animating a swap of “inner” content. Using a container transform to animate between views can help reinforce their relationship and maintain a user’s navigational context.

当一件事变成另一件事时，将使用转换的“英雄”容器转换。 这是什么意思？ 示例包括扩展到详细信息页面的列表项，变型为工具栏的FAB或扩展为浮动卡的芯片 。 在每种情况下，都有一个组件转换为另一个组件，从而维护了共享的“外部”容器，同时为“内部”内容的交换设置了动画效果。 使用容器变换在视图之间进行动画处理可以帮助加强它们之间的关系并维护用户的导航上下文 。

In Reply, we’re adding a container transform between a Fragment holding a list of emails (HomeFragment) and an email details fragment (EmailFragment). If you’re familiar with Android shared element transitions, the setup is pretty similar!

在Reply中，我们在包含电子邮件列表的Fragment( HomeFragment )和电子邮件详细信息片段( EmailFragment )之间添加了一个容器转换。 如果您熟悉Android共享元素转换 ，则设置非常相似！

Start by identifying our two shared element views and give them each a transition name. The first is a single email list item card where we will use Data Binding to make sure each item has a unique transition name.

首先确定我们的两个共享元素视图，并为每个视图赋予一个过渡名称 。 第一个是单个电子邮件列表项目卡，我们将在其中使用数据绑定来确保每个项目都有唯一的过渡名称。

The second is the full-screen card inside of our EmailFragment, which can be given a static transition name since it’s the only one in the view hierarchy. Note that our first and second shared elements don’t need to use the same transition name.

第二个是我们的EmailFragment的全屏卡，可以为它指定一个静态的过渡名称，因为它是视图层次结构中唯一的一个。 请注意，我们的第一个和第二个共享元素不需要使用相同的过渡名称。

These two views will be picked up by our container transform. Under the hood, both will be placed inside a drawable whose bounds are clipped inside a “container” that animates its shape from a list item to a details page. During the transition, the container’s contents (the list item and the details page) are swapped by fading the incoming screen in on top of the outgoing screen.

我们的容器转换将拾取这两个视图。 在引擎盖下，两者都将放置在一个可绘制对象中，其可伸缩对象被裁剪到一个“容器”中，该容器将其形状从列表项移动到详细信息页面。 在过渡期间，通过将传入屏幕淡入到传出屏幕顶部，可以交换容器的内容(列表项和详细信息页面)。

Now that we’ve marked our shared element views, let’s create and set our destination Fragment’s sharedElementEnterTransition to a new instance of MaterialContainerTransform. By default, this sharedElementEnterTransition will also be automatically reversed and played when going back from the details page.

现在我们已经标记了共享元素视图，让我们创建目标Fragment的sharedElementEnterTransition并将其设置为MaterialContainerTransform的新实例。 默认情况下，从详细信息页面返回时，此sharedElementEnterTransition也将自动撤消并播放。

For details on MaterialContainerTransform parameters, see the motion documentation.

有关 MaterialContainerTransform 参数的 详细信息 ，请参见 运动文档 。

Now when an email is clicked, all we need to do is supply our Fragment transaction with mappings between our start and end view transition names. With this information, the detail fragment’s shared element transition is able to find and animate the two views using our supplied MaterialContainerTransform.

现在，单击电子邮件时，我们要做的就是为Fragment事务提供开始视图和结束视图过渡名称之间的映射。 有了这些信息，详细信息片段的共享元素过渡就可以使用我们提供的MaterialContainerTransform查找和创建两个视图的动画。

In the above snippet, we’re also setting an exit and reenter transition for the outgoing list fragment. Material Components provides two helper transitions to smoothly animate a Fragment that is being replaced: Hold and MaterialElevationScale. In addition to a fade, MaterialElevationScale will scale out our list of emails when exiting and scale them back in when reentering. Hold would simply keep our list of emails in place. Without setting an exit transition, our list of emails would immediately be removed and disappear from view.

在以上代码段中，我们还为传出列表片段设置了exit和reenter过渡。 Material Components提供了两个辅助过渡来平滑地为要替换的Fragment制作动画： Hold和MaterialElevationScale 。 除了淡入淡出之外， MaterialElevationScale会在退出时缩放我们的电子邮件列表，并在重新进入时缩放它们。 Hold将只保留我们的电子邮件列表。 如果不设置退出过渡，我们的电子邮件列表将立即删除并从视图中消失。

If we were to run the code at this point and navigate back to our list of emails from the details page, the return transition wouldn’t run. This is because the transition system isn’t able to find the two views which are mapped to our transition names, since the email list adapter hasn’t yet been populated when our transition starts. Luckily, we have two handy methods at our disposal: postponeEnterTransition and startPostponedEnterTransition. These allow us to delay the transition until we know our shared elements are laid out and can be found by the transition system. In Reply, we can postpone until we are sure our RecyclerView adapter has been populated and our list items have been bound with transition names using the following snippet:

如果我们此时要运行代码并从详细信息页面导航回我们的电子邮件列表，则返回转换将不会运行。 这是因为转换系统无法找到映射到转换名称的两个视图，因为转换开始时尚未填充电子邮件列表适配器。 幸运的是，我们有两种方便的方法startPostponedEnterTransition ： postponeEnterTransition和startPostponedEnterTransition 。 这些使我们能够延迟过渡，直到我们知道共享元素已被布局并且可以由过渡系统找到为止。 在“回复”中，我们可以推迟到确定使用以下代码段填充了RecyclerView适配器并且列表项已与过渡名称绑定在一起为止：

In your own app, you may need to experiment with these two methods to find the right time to start postponed transitions depending on how and when you’re populating your UI. If you find your return animation isn’t running, starting transitions before a shared element is ready is likely the cause.

在您自己的应用程序中，您可能需要尝试这两种方法，以根据您填充UI的方式和时间找到合适的时间开始推迟的转换。 如果发现返回动画没有运行，则可能是在共享元素就绪之前开始过渡。

Moving on to our search screen!

进入我们的搜索屏幕！

共享轴：打开搜索页面 (Shared axis: Opening the search page)

The shared axis pattern is used for transitions between UI elements that have a spatial or navigational relationship. In Reply, opening search takes the user to a new page that sits on top of the list of emails. To illustrate this 3-dimensional model, we can use a shared z-axis transition between the list of emails (HomeFragment) and the search page (SearchFragment).

共享轴模式用于具有空间或导航关系的UI元素之间的过渡。 在“回复”中，打开搜索会将用户带到电子邮件列表顶部的新页面。 为了说明此3维模型，我们可以在电子邮件列表( HomeFragment )和搜索页面( SearchFragment )之间使用共享的z轴过渡。

Shared axis transitions operate on two targets simultaneously to create the final, choreographed transition. This means that “pairs” of transitions run together to create a continuous, “directional” animation. For fragments, these pairs are

共享的轴过渡同时在两个目标上运行，以创建最终的编排过渡。 这意味着“成对”的过渡一起运行以创建连续的“定向”动画。 对于片段，这些对是

• FragmentA’s exitTransition and Fragment B’s enterTransition

  FragmentA的exitTransition和Fragment B的enterTransition

• FragmentA’s reenterTransition and FragmentB’s returnTransition

  FragmentA的reenterTransition和FragmentB的returnTransition

MaterialSharedAxis, the class implementing the shared axis pattern, accepts a property called forward to control this concept of directionality. For each transition pair, forward must be set to the same value to have the pair’s animations coordinate correctly.

MaterialSharedAxis (实现共享轴模式的类)接受一个称为forward的属性来控制此方向性概念。 对于每个过渡对，必须将forward设置为相同的值，以使该对的动画正确协调。

See the motion documentation for more details on shared axis directionality.

有关共享轴方向性的更多详细信息，请参见运动文档 。

In Reply, here’s how we can set up the exit and reenter transitions for our current fragment (HomeFragment).

在Reply中，这是我们如何为当前片段( HomeFragment )设置退出和重新进入过渡。

In our destination fragment (SearchFragment), we set up the enter and return transitions.

在目标片段( SearchFragment )中，我们设置了输入和返回转换。

Notice the current fragment’s exit transition and the search fragment’s enter transition use the same value for forward — true. The same goes for the current fragment’s reenter transition and the search fragment’s return transition.

请注意，当前片段的退出转换和搜索片段的enter转换对forward使用相同的值— true 。 当前片段的重新进入过渡和搜索片段的返回过渡也是如此。

Next, by default, transitions run on all child views within their scene root hierarchy. This means that a shared axis transition will be applied to each email in the list page and each child of the search page. This can be a neat feature if you want to “propagate” or “stagger” animations, but since we want to animate the root of each fragment as a whole, we need to set android:transitionGroup="true" on both our email list RecyclerView and our search page root view group.

接下来，默认情况下，过渡将在其场景根层次结构内的所有子视图上运行。 这意味着共享轴过渡将应用于列表页面中的每个电子邮件以及搜索页面的每个子页面。 如果要“传播”或“ 错开 ”动画，这可能是一个很好的功能，但是由于我们要对每个片段的根进行动画处理，因此我们需要设置 电子邮件列表 RecyclerView和搜索页面根视图组上的android:transitionGroup="true" 。

With that, we should have a nice shared z-axis transition to and from our search page! Shared axis is a really flexible transition that can work in a lot of different scenarios — from page transitions, to smart reply selections, to onboarding or vertical stepper flows. Now that you have the set up configured, you can also experiment with MaterialSharedAxis’ s axis parameter to check out what the other axis animations look like.

这样，我们应该在搜索页面之间有一个很好的共享z轴过渡！ 共享轴是一种真正灵活的过渡，可以在许多不同的场景中使用-从页面过渡到智能回复选择，再到入门或垂直步进流程。 既然已经配置好设置，您还可以尝试使用MaterialSharedAxis的axis参数来检查其他轴动画的外观。

淡入：切换邮箱 (Fade through: Switching mailboxes)

The last pattern we’ll cover is the fade through pattern. A fade through can be used to transition between UI elements that do not have a strong relationship. When transitioning between mailboxes, we don’t want the user to think their sent emails are navigationally related to their inbox. Since each mailbox is a top-level destination, fade through is an appropriate choice. In Reply, we’ll be replacing the list of emails (HomeFragment) with a different list of emails (HomeFragment with new arguments).

我们要介绍的最后一个图案是淡入淡出图案。 淡入可以用于在没有牢固关系的UI元素之间过渡。 在邮箱之间转换时，我们不希望用户认为他们发送的电子邮件与他们的收件箱在导航上相关。 由于每个邮箱都是顶级目的地，因此淡入淡出是一个适当的选择。 在Reply中，我们将用不同的电子邮件列表(带有新参数的HomeFragment )替换电子邮件列表( HomeFragment )。

Since MaterialFadeThrough doesn’t have the idea of directionality, the set up is even easier. We can just set an exit transition on our outgoing fragment and an enter transition on our incoming fragment.

由于MaterialFadeThrough没有方向性的概念，因此设置更加容易。 我们可以在传出片段上设置退出过渡，在传入片段上设置进入过渡。

The need to set android:transitionGroup="true" on our list of email’s RecyclerView also applies here, but this has already been taken care of during our shared axis configuration step.

在电子邮件的 RecyclerView 列表中设置android:transitionGroup="true" 的需求也适用于此，但是在共享轴配置步骤中已经解决了这一问题。

That’s it for the fade through transition! Find fun places to use the fade through pattern in your own app like switching between bottom navigation destinations, swapping a list of items, or replacing a toolbar menu.

淡入淡出就是这样！ 在自己的应用程序中找到有趣的地方来使用渐变模式，例如在底部导航目标之间切换，交换项目列表或替换工具栏菜单。

继续移动！ (Keep on moving!)

That’s a brief look into the Material motion system on Android. There are lots of things you can do to customize motion using the patterns provided, making motion a part of your brand’s experience. Also keep in mind that while we looked at Fragment transitions, the motion system can be used to transition between Activities all the way down to Views. Check out the full motion spec for some inspiring examples to get you thinking about where you might be able to polish your app’s core experience or add some extra delight in small places.

这是对Android上的Material motion系统的简要介绍。 您可以做很多事情来使用提供的模式来自定义运动 ，使运动成为品牌体验的一部分。 还请记住，当我们查看片段过渡时，可以使用运动系统在“活动”之间一直过渡到“视图”。 查看完整的运动规范 ，以获取一些启发性的示例，以使您思考在哪里可以改善应用程序的核心体验或在小地方增加一些额外的乐趣。

To keep learning, check out the following additional resources:

为了继续学习，请查看以下其他资源：

Material motion developer documentation

材质运动开发人员文档

Lots of customization options and tips on animating between Activities and Views can be found in Material Android’s motion documentation!

可以在Material Android的运动文档中找到许多自定义选项以及在“活动”和“视图”之间进行动画制作的提示！

Material motion codelab

物质运动代码实验室

A full, step-by-step developer tutorial covering how to add Material motion to Reply.

完整的分步开发人员教程，内容涉及如何在“回复”中添加“材质运动”。

Google Drive for Android

Android版Google云端硬盘

Take a look at Google Drive on Android to see the motion system in action. Clicking on folders, opening search, and navigating between bottom navigation destinations all use transitions from MDC-Android.

看看Android上的Google云端硬盘，看看运行中的运动系统。 单击文件夹，打开搜索以及在底部导航目标之间导航都使用MDC-Android的转换。

翻译自: https://medium.com/androiddevelopers/material-motion-with-mdc-c1f09bb90bf9

dubbo使用mdc