动效原则 Animation Principles

动效系统

Q语言中的动效系统由三种模式组成，分别为：容器转场，位移，淡入淡出。

1 容器转场

容器转场模式是容器UI元素之间的转换，加强页面元素的前后衔接以及转场变化时的视觉引导。通过将一个元素过渡转换为另一个元素，这个模式可以让两个元素过渡得更加自然连贯。 以QQ聊天框点开大图为例：

2 位移

位移模式用于具有同级导航关系的UI元素之间的过渡。 此模式通过在水平位移变换和垂直位移变换来加强元素之间的关系。

水平位移

增强了UI元素之间的水平布局或同级导航关系。以QQ表情切换为例：

垂直位移

垂直位移可增强UI元素之间的垂直布局或同级导航关系。以QQ空间相册时间轴为例：

3 淡入淡出

淡入淡出模式用于功能页面之间没有密切联系的UI元素过渡。例如通过点击底部导航栏触发的过渡，由于页面之间的联系性并不大，再加上淡入淡出模式，用户不会误以为页面可以水平滑动。以QQ空间相册页面切换为例：

速度

通过对动画速度的控制，可以使动效的观感流畅自然，从而提升用户的体验舒适度。而动画的速度取决于两点：动画时长和缓动曲线。

1 动画时长

动画总时长不应过快或过慢，尽量保证视觉引导连贯的同时，又不会造成过久的等待。另外，动画的时长也不是绝对的，具体取决于不同的应用场景，这里我们定义了两种场景，需要对动画的时长进行相应的调整：

UI组件的尺寸

考虑页面元素本身的尺寸，使用不同的时长。页面元素的尺寸小，动画持续时间较短，反之，页面元素的尺寸大，则动画的持续时间就相对较长。

案例 1: 小尺寸UI组件
switch开关这类小尺寸的页面元素，动画时长稍快：使用100ms
案例2: 中尺寸UI组件
菜单弹层这类适中尺寸的页面元素，动画时长尽量适中：展开时长250ms，收起时长200ms
案例3: 大尺寸UI组件
加号面板这类大尺寸的页面元素，动画时长稍慢：展开时长300ms，收起时长250ms

开始操作和结束操作

操作开始场景，如打开或展开类的操作，动画的时长相对慢，启到吸引用户注意力，突出重点的目的。而结束操作场景，如关闭收起类的动画则更注重效率，需要在尽可能短的时间内完成过渡，有助于用户快速进行后续操作。

2 缓动曲线

结合自然运动的规律，任何元素在运动时都离不开摩擦力，重力和质量之类的自然力。“缓动曲线”描述了现实物理运动中精确的加速度和减速度。在现实世界中，物体不会瞬间启动或停止，所以纯线性的动画曲线是非常不自然的。同样的，页面元素在移动时也会快速加速，并顺畅地减速，这才符合真实的物理原理。 在实际应用中，我们主要会使用以下3种缓动曲线：

标准曲线

标准曲线是最常用的缓动曲线，当页面元素从运动的开始到结束都在屏幕内可见时，使用标准缓动曲线。它的特点是从启始点先开始加速，达到速度峰值后再逐渐减速直到静止。具体参数 cubic-bezier(0.4,0.0; 0.3,1.0)

减速度曲线

当页面元素从屏幕外进入时，使用减速度曲线。它的特点是从峰值速度开始运动，逐渐减速到静止为止。具体参数 cubic-bezier(0.0,0.0; 0.15,1.0)

加速度曲线

当页面元素从屏幕内移出屏幕外或消失时，使用加速度曲线。它的特点是从静止开始，逐渐加速，最后以峰值速度结束并消失在可视范围。具体参数 cubic-bezier(0.5,0.0; 1.0,1.0)

组合

当页面有多个元素在同时段运动时，合理的运动规则能帮助用户分清页面主次和减轻认知负担，并引导用户的视觉动线。

1 合理的顺序

合理分配页面多元素的运动顺序能帮助用户理解当下场景，并进行舒适的视觉过渡和视觉动线的引导。

案例：图片浮层的进入和退出从动态进入图片浮层时，用户首要关注图片内容，其次是操作和顶部信息。所以在动画的顺序安排上，图片的放大和底部的黑色蒙层的出现动画优先执行，之后执行顶部信息和底部操作的出现动画。
在退出图片浮层时，用户此时不再关注照片的顶部属信息和底部操作，引导用户的视觉回到之前的动态场景是更为重要的。所以在动画顺序的安排上，顶部信息和底部操作消失动画会优先结束，最后结束照片控件缩小动画，从而让用户更能感受到从哪来，回哪去。同时，退出浮层应该是高效快速的，所以在整个动画的时长上也进行了相应的缩短。

2 连贯的动作

在合理的动画顺序基础上，连贯的动效，能给用户更为优雅流畅的视觉体验。所以对多个元素的动画设计时，不可所有元素同时运动，也不可多个元素完全错开运动（会显得呆板低效），适当的错帧和动画时间交叠，能使动画更流畅和高效。