《动效设计中应该避免动画速度相同》这个概念，在早期直播的时候其实也有讲过，这次我会通过文章的梳理，让各位阅读者能更清晰的理解这个概念。Ul动画的时间和速度可能看起来都是一样的，但实际上，好的UI动画之间其实还存在一些微妙的差异。本篇文章，主要解释根据窗口大小的动画差异以及根据引导和结束时间的动画差异。

UI动画的速度和体积变化（窗口内容的大小）在整个动效设计中存在微妙差异，动画要根据窗口大小而变化。通过使较小的对象移动得更快、较大的对象移动得更慢，可以使动画看起来更自然。较快的动作适用于小窗口，而较慢的动作则适用于大窗口。下面我们来看几组动画效果

更多精彩图片 请登录

较快的小窗口

更多精彩图片 请登录

中窗口

更多精彩图片 请登录

较慢的大窗口
这三个窗口的动画在按钮按下后分别显示小、中、大窗口，并且动画会根据大小而产生细微的变化。（动画分为入场，等待，离场3段动画）通过使较小的对象移动得更快，较大的对象移动得更慢，可以使动画看起来更自然。

更多精彩图片 请登录

较慢的小窗口如果小窗户按照大窗口的时间和速度去表现的话，会显得非常缓慢，整体效果上感觉会有些呆滞。

更多精彩图片 请登录

较快的大窗口如果大窗户按照小窗口的速度和时间去表现，移动速度过快，会给视觉带来较大负担，给人以震撼和紧迫的感觉。所以我们在制作不同大小窗口的动画时，固定的节奏是不存在的，要随机应变。更好的动画在接近现实生活中的自然运动规律时感觉会更自然。

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

巨大的物体动作缓慢因此可以通过让大物体缓慢移动而小物体快速移动来获得自然的体验，就像在现实世界中一样。另外一种速度的表现在于，如果想尽快完成动画以减少用户的等待时间的话，动画可以用从中间开始播放的方式进行设计，这里的中间不是说动画从中间出现，而是动画的初始帧对应的XY轴（时间线和运动线），也就是说缩放比例不要从0开始

更多精彩图片 请登录

所以我们制作动画时一般不会从头到尾都要详细展示，这样把开头部分动画减少一部分（也就是初始的运动不要从0开始），那么它也会在你的脑海中自动完成，形成一种自然的体验，也没有任何不适，所以这种方式是比较推荐的

更多精彩图片 请登录

从0开始

更多精彩图片 请登录

从0开始

更多精彩图片 请登录

从0开始上图中运动从0开始全部播放动画的缺点是动画会变长，会对用户的视线造成过度的引导。

更多精彩图片 请登录

从中间开始从中间开始的效果就更加自然，用户的感受也会更加顺畅。除了从0和从中间出场的区别以外，入场和离场的动画是有一定区别的，入场是为了让用户打开界面后看到的内容并进行阅读，所以需要动画来吸引用户的注意，但是在离场关闭的时候，动画就没有必要和入场的效果一样去表现，而是在离场后用户要去关注哪里、又或者是否想让用户继续观看是很重要的。知识点：希望用户在关闭界面后将视线放在哪里来调整动画效果是非常重要的一点。因此，为了不需要突出结束的动画，缩短动画时间，快速结束这个界面的话用户就可以不分心地体验到下一个内容了。

更多精彩图片 请登录

与入场相同的效果动画（图1）

更多精彩图片 请登录

离场快速结束的动画效果（图2）
将从右边出现的窗口向左发生移动的动画效果作为动效法则是正确的，但是缺点是会让用户的视线集中在右边（图1）。这种时候的应对方法是，把离场时的动画缩短到极短的程度会更加舒适，也可以适当的加入一点向右位移退出的动画迹象，通过alpha的淡出效果（图2），来避免离场时间过长的问题，还有就是直接删除也是一种不错的选择。总结：1、制作动效时要根据窗口的大小调整时间和速度来进行入场与离场的设计。2、缩短离场时间不会分散用户的注意力，虽然整个效果看上去很极简，但通过对细节的完善，会让用户的体验会变得更加自然。3、希望用户在关闭界面后将视线放在哪里来调整动画效果非常重要。本期分享就到这里，感谢您的关注！如果你想学习更丰富的UI动效设计，欢迎来了解我们的动效课程《Unity项目全流程动效班2期》

更多精彩图片 请登录

我们官网平台还有更多高清动效视频参考资料，您可以关注我们官网乐魔UI，或者想学习动效，也欢迎来到我们的官网，官网里有大厂大佬的动效课程，以及各种免费动效课，还等什么，快来加入我们吧！https://www.lemooui.com

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

也欢迎您加入到我们的动效交流群

更多精彩图片 请登录

更多精彩图片 请登录

群里有多个大厂HR，提供更多的UI、动效、交互工作岗位我是Leo，快跟我一起了解游戏动效吧！

感谢分享！