动效是一个UI设计师必须要掌握的技术，做动效时不仅要有用，要美观。今天小编就和大家分享一些动效知识，希望大家可以有所收获。

　　什么是动效?

　　所谓动效，从它的性质上来说，就是用户界面上突出的元素。人们的视线会不由自主的追寻着动态的物体，这也可以说是一种条件反射。因此，相较于文字文本和静止的图像，动态的容易被发觉。UI设计师在设计作品时经常使用功能动效，即在UI设计中作为功能的一部分被采用的小动效，有着非常明确和合理的目的。

　　UI动效设计的功能可分为哪些?

　　1、 抑制状态的变化

　　添加动效好的地方，就是让变化的瞬间变得引人注目。用户界面状态的变化，特别是网站上突然的变化就可以在UI中添加动效进行缓和。

　　2、可视化的反馈

　　舒适的交互设计可以提供好的反馈，反馈能告诉用户系统已经识别到了你的操作，显示出相互作用的结果。

　　3、解说动画

　　对于包含用户的新的或不熟悉的功能或交互的用户界面，解说动画显得额外重要。它可以帮助用户了解流程或如何与某些界面元素进行交互。

　　4、系统状态的可视化

　　作为Jakob Nielsen为了可用性推导出来的答案之一，系统状态的可见性仍然是用户界面设计中重要的原则之一。

　　常见的UI动效设计有哪些?

　　1、缓动(Easing)：缓动效果能够让运动看起来加接近自然，符合用户的认知，达到用户的预期。

　　2、偏移量和延迟(Offset & Delay)：　利用偏移和延迟来错开元素的运动时间，表明元素之间的层级与关系。

　　3、父子关系(Parenting)：是子元素的某个属性的值随父元素的某个属性参数的值按照一定的比例进行变化。

　　4、变形(Transformation)：利用变形来告知用户元素的状态或作用发生了改变。

　　5、数值变化(Value Change)：连续性的数值变化动态效果能让用户清晰地看见数值到底是在变多还是变少。

　　6、遮罩(Masking)：是在界面元素进场或者退场的时候创造连续性效果的一种选择。

　　7、覆盖(Overlay)：用于在扁平化(没有厚度)设计的界面上阐明两个相互独立的元素的位置关系。

　　8、蒙层：是通过高斯模糊或变暗的手段让下方的元素保留一定的可视性。

　　9、、生成(Cloning)：能够非常清晰地表达因某个操作而产生的一个或数个事件发生以及它们之间的关系。

　　9、视差(Parallax)：通过视差的特性，能引导用户去关注该关注的地方，还会让整个页面看起来加活泼。

　　10、镜头平移与缩放(Dolly & Zoom)：镜头平移与缩放效果表明元素与空间之间的关系，也能表现出一种纵深感。