最全最好用的动效落地方法，都帮你总结好了（上）

用户体验设计的发展日趋完善，优秀的动效是完善用户体验中不可或缺的一环，优秀的界面动态设计可以让产品的用户体验锦上添花……

你会说，这些道理我都懂，但是动效做起来真的很麻烦啊。直接切入到大家常见的问题吧：

一般情况下，在沟通界面动效的过程中，工程师会希望设计师使用更具体的表达方式。这里所谓「具体」的意思是：接近代码。然而同样的一套动效，在设计工具上和 Web 端上实现逻辑可能完全不一样。

没有了精确的参数描述。设计师很难跟开发解释清楚要做一个什么样的动效。而只有简单的口头描述的话、开发做起来也很痛苦，导致最终开发效率低下。以至于知乎上出现了这样的问题：在APP的开发过程中，作为设计师，如何说服程序去实现动效？

看到这里也许你会很抓狂。好消息是随着却越来越多优秀开源库的诞生，动效的实现也变得越来越简单。甚至以后设计师都不用说服工程师了，自己可以直接上手在端上实现动画了。举个例子 San ：https://baidu.github.io/san/

这个例子中卡片 Hover 动效的设计和开发都是我做的。

虽然只是一个很简单的细节，却给人以惊喜，一定程度提高了网站的品质感。

本篇教程会分为两个部分来详细阐述：

• 上篇：在界面设计中，什么样的动效是好动效？

• 下篇：从前端的角度来讲，有哪些便捷的方法实现这些动效？

一、什么样的动效是好动效

动效并不是设计师为了炫技设计出来的东西，它是有很多现实意义的。为了更加高效（心甘情愿）的去实现动效（做苦力）。我们首先需要知道什么动效是好动效。

简单来讲。动效有以下三个方面的价值。

1. 满足用户的心理预期

我们生活在一个物理世界，任何事物的运动都是符合物理世界的客观规律的。因此，人对于事物的观察和理解都是出于对物理规律的理解。而虚拟界面上的元素都是现实世界中并不存在的东西，会让用户有陌生感。

通过合理的动效，让虚拟界面模拟物理世界的规律，例如惯性、视差等等，可以让这个虚拟的世界与物理世界产生交集。用户会把自己对物理世界的认知映射到对产品的认知上。

下面举两个例子来说说具体是怎么映射的：

质量

物体都拥有质量，质量带来了我们最常见的物理现象：惯性。在这个例子中、方块在界面上通过加速、减速、反弹、过冲等等动态来模拟所谓的重量感，让这个简单的界面元素有了实在感。

空间

我们所处的世界是三维的，然而受显示设备的影响，目前大家接触的大部分人机界面还是二维的，如何通过一个二维平面来模拟三维的世界呢？

在这个例子中，近处的方块运动的快，远处的方块运动的远。通过这样的视差的效果，整个屏幕有纵深感，不再是一个简单的二维平面。我们很容易感受到，方块间的层叠顺序。同理，类似简单的动效，可以很轻易的表达元素的层级。

小结：合理的动效可以满足用户的心理预期，越是符合人对物理世界认知的设计，就越容易帮助用户去预判或者理解产品的交互逻辑。