如果容器从屏幕边界进入，它会淡入并放大。它不从0%开始制作动画，而是从95%开始，以避免元素之间过渡太多。下面来讲讲产品如何快速构建ui动效，希望对你有帮助。
移动性有助于使ui更具表现力，更易于使用。尽管它有很大的潜力，但它可能是ui设计家族中最新的成员之一，所以它可能是所有设计学科中最少的。为公众所知。视觉设计和交互设计可以追溯到早期的Gui，但是由于动画必须由现代硬件平滑地呈现，而且ui运动和传统动画之间的重叠使得两者之间的区别更加复杂。传统动画需要掌握迪士尼的12条基本原则。这是否意味着ui动画和传统动画一样复杂?我经常听到人们说动效设计很复杂，我不知道如何选择相应的动画模式，但我认为至少在ui领域，动效设计可以很简单。
动效设计主要作用是帮助用户浏览应用程序，通过ui元素之间的关系过渡。当然，你也可以通过使用图标、奖章和插图效果为应用程序添加颜色，但是构建产品可用性应该优先于添加动态性能。在展示你的动效设计技能之前，让我们先设计一个基本的运动，即产品导航之间的转换。
过渡模式
在设计导航之间进行转换时，简单性和一致性是最关键的。为此，我们将在以两种动画模式进行选择:
1. 基于容器的过渡
2. 没有到容器的转换
如果动画包含按钮、卡片或列表等内容，那么使用基于容器的动画设计，容器通常有明显的边界。这个模式分为三个步骤:
1. 使用材质的标准缓动使容器具有动画效果(这意味着它可以快速加速，然后缓慢减速)。
2. 缩放容器中的元素以适应宽度，将元素固定在顶部，但仍然在容器中，在容器和内部元素之间创建一个清晰的关系链。
3.当容器加速时，它会在转换期间淡出。随着容器变慢，输入元素逐渐淡入。当元素快速移动时，元素被淡入替换。
将此模式应用于所有涉及容器转换的效果，这些转换建立一致的运动规则。这也使得开始和结束之间的关系更加清晰，因为它们由两个动画容器连接。为了展示这个模型的灵活性，它被分为五个不同的使用场景:
有些容器只是使用材质的标准缓动功能从屏幕上滑动进来，它滑动的方向取决于与之关联的组件位置。例如，单击左上角的折叠项导航，图标将从左侧滑动容器。
如果容器从屏幕边界进入，它会淡入并放大。它不从0%开始制作动画，而是从95%开始，以避免元素之间过渡太多。变焦动画使用了材质的减速，这意味着它从峰值速度开始，然后逐渐减速。当元素退出时，容器将在没有缩放动画的情况下淡出。
过渡没有容器
有些作品会使用没有容器的转换来构建动态设计，例如点击底部导航栏中的图标，将用户带到一个新的页面，在这种情况下，将使用以下两个步骤:
1. 开始的元素通过淡入消失，然后最后的元素通过淡入进入。
2. 当最后一个元素出现时，使用材料的减速运动来微妙地显示。但同时缩放只适用于新旧内容的替换。
