ae UI动效_ae如何制作UI动效教程

动效主要是通过UI元素之间关系过渡。可以通过使用图标、勋章以及插画动效来为App增色，但是建立产品可用性应该优先于增加动效表现力。

过渡模式

在设计导航之间进行动效过渡时，简单性和一致性是最关键的点。以2种动画模式中进行选择：

1、基于容器的过渡。

2、没有容器的过渡

基于容器的过渡

文本、图标和图片等元素在容器内进行分组

如果动画涉及像按钮，卡片或列表这样的内容，则使用基于容器的动画设计，容器通常有很明显的边界，这种模式分为三个步骤：

1.使用Material的标准缓动为容器设置动画。容器的尺寸和圆角半径从圆形按钮动画过渡到填充整个屏幕的矩形。

2.缩放容器中的元素进行宽度自适应，将元素固定在顶部但是仍然存在容器内，这样在容器和内部元素之间创建了清晰的关系链。

3.随着容器加速，在过渡期间逐渐淡出消失。当容器减速时输入的元素逐渐淡入。当元素进行快速移动时，通过淡入淡出来实现元素的更替。

将此模式应用于所有涉及容器过渡的动效，这样会建立起来一致的动效规则。这样还使得开始和结束之间的关系更加清晰，因为它们是由两个动画容器互相衔接的。

有的容器只是使用Material的标准缓动从屏幕外滑入，它滑动的方向取决于与之关联的组件位置。

如果容器从屏幕边界进入，则它会淡入并放大。它并不是从0%的比例制作动画，而是从95%开始，以避免元素之间的过渡幅度太大。

没有容器的过渡

1、起始元素通过淡出消失，然后最终元素通过淡入进入。

2、随着最终元素逐渐出现，使用Material的减速运动来巧妙的展现。但同时缩放仅适用于新旧内容的替换。

如果开始和结束的组合元素具有清晰的空间或顺序关系，则可以使用共享动画来强化它。

最佳方案

鉴于其动画频率高低与产品可用性密切相关，导航过渡通常应该优先于功能展示。

选择合适的时间及缓动类型

导航过渡应该使用合适的时间，快速过渡优先考虑功能，但是速度也不要太快，防止动画路径迷失。根据动画占用的屏幕比例来选择动画持续时间。由于导航过渡通常占据屏幕的大部分，因此300ms是一个比较有经验的动画时长。相比之下，像开关按钮这种小组件动画持续时间很短，大概在100ms左右。

Easing描述了动画加速和减速。大多数导航过渡使用Material的标准缓动，这是一种不对称的缓动类型。这意味着元素会快速加速运动，然后缓慢减速以将注意力集中在动画结束时。这种类型的缓动为动画提供了自然的感觉，因为现实世界中的物体不会立即开始或停止移动。