动态系统

1-把握节奏：持续时间

效持续时间受距离、物体大小、速度、物体形变、应用场景等因素影响。

大量研究表明，任何短于 100 毫秒的动画都是瞬时的，基本不会被识别；而当动画的持续时间超过 1 秒，就会传达出一种延迟停滞感。

进入与退出

退出动画比进入动画持续时间要短，因为与用户的下一个过渡相比，它们所需的注意力更少。

过渡

元素变化面积越小，动画持续时间越短。

• 手机设备上，动效持续时间保持在100-300ms之间，根据具体元素的大小及动效移动范围具体变化

• 在平板电脑上，这个时间会稍微长 30%，大约在 400-450ms。原因很简单，在更大的屏幕上，元素变化的位置路径会更长。

• 在可穿戴设备中，持续时间又要缩短 30% 了，大约在 150-200ms，因为小屏幕上元素变化的位置路径会更短。

• 在网页上的动画应该要比在手机上持续时间少 2 倍多，在 150-200ms 之间。一旦超过这个时间区间，用户就会感到不流畅。

2-把握节奏：缓动

匀速直线运动在大自然中并不存在。用运动曲线描述运动中的各类加速度，以符合现实世界的物理原理。

动效速度适当，既能被用户理解又不让用户等待，据总结，我们通常使用以下几类运动曲线。

• 缓入缓出：以静止开始和结束的元素使用标准缓动。它们会快速加速并逐渐放慢速度，以强调过渡的结束。

• 强调缓动：强调缓动会在动画结束时引起更多的关注，极其强调过渡的结束。它通常与更长的持续时间结合使用，以传达出更加风格化的速度感。

• 加速缓动：元素离开页面时使用加速缓动，元素从静止开始并以峰值速度结束动画。

• 减速缓动：页面进入新元素使用减速缓动，元素高速进入画面，并在静止时结束。

• 弹跳、拉伸与突然停止：这几类缓动通常传递了特定的动作内容及叙事表达，往往更具趣味性而充满活力。在用户界面中建议克制使用这几类缓动曲线，应注意保持界面的简洁高效。

（配图皆来源于网络 侵删）