用户界面是最直观的呈现给用户，而其中动画在这方面又扮演着重要的角色。正如@Nick Babich所说:动画将用户界面带入生活。而且，UI动画在用户体验方面也是重要的一环。特别是移动端开发的同学更清楚这一点。移动应用中的UI动画是体验的核心部分之一，而不是事后的想法。可是呢？事实上我们经常遇到的Web运用程序或App只是从一个视图跳到另一个视图，并没有给用户足够多的时间来处理当前环境中刚刚发生的事情。同时，很多同学都认为，动画通常在用户体验方面仅仅是锦上添花，并且被认为是不必要的、过渡的或太复杂的，无法实现的，也是因为这些原因，UI动画在很多Web应用中被忽略了。更糟糕的是，缺乏意义的动画会给自己产品体验方面带来损害。

通常，我们使用的Web应用大多数都只是简单地从一个视图切换到另一个视图，导致用户体验不直观，但是我们可以通过技术的手段把这方面的交互行为做得更得体：

在创建UI时，添加合理的UI过渡动效，避免跳转和瞬间移动。如果将生活中的一些自然运动用到UI动效中来，将会给你的用户带来眼前一亮的感觉。毕竟，所有与你互动的东西都源自于生活中自然的运动。

接下来，我们将一起探讨你可能熟悉的某一类有意义的增强用户体验的UI动效。这种技术有一个专业术语，即FLIP（First, Last, Invert, Play）。FLIP技术可以以一种高性能的方式来动态的改变DOM元素的位置和尺寸，而不需要管它的布局是如何计算或渲染的（比如，height、width、float、绝对定位、Flexbox和Grid等）。在改变的过程中将赋予一定的动效，从而达到我们所需要的目的，让UI动效更为合理，相应增强用户的体验。

视图之间的过渡

在移动应用程序中从一个视图移动到另一个视图时，焦点元素通常会在视图之间从一个位置移动到另一个位置。比如下面的这些场景：

图片展开和收缩效果

项目删除和添加时填充空白区域的效果

网格项的重新排序

特别声明，以前录屏效果来源于@harrisfreddy分享的《F.L.I.P. LAYOUT ANIMATION》话题。其实类似于这种视图切换的效果还有很多，比如@Nick Babich的博客中列举的一些示例效果。

但是在实现这些动画时，有一个烦人的问题：如何在同一个项目中的两个视图或状态之间有一个流畅地动效？。引入FLIP技术，我们就可以解决这样的烦恼，在两种状态之间可以共享一个元素。

为什么是FLIP技术

你可以已经尝试过了改变元素的height、width、top、left或者除也transform和opacity之外的其他属性来实现一个动画效果。或许你已经在以往的经历（做的动效）中发现自己的实现的动效有点粗糙甚至卡顿，其实这是有一定原因的。任何触发布局变化的属性（比如height），浏览器都会递归检查布局中的其他元素是否也因此改变，这样的一个过程花销是很贵的。如果这个计算所费的时间比一个动画帧（大约16.7ms）更长，那么动画就会丢帧，从而导致动画迟滞，给用户的体验是，你的动画是卡顿的，这主要是因为动画丢的帧没有及时渲染。@Paul Lewis的博客《像素是昂贵的》一文中深入地阐述了如何渲染像素以及各种性能的开销。

@Paul Irish和@Paul Lewis在HTML5 Rocks写的另一篇文章中也解释了如何获得高性能的动画。简单地说，如何利用管道确保动画达到60fps。也就是说，只有改变属性才能触发合成（Compositing）而不是布局（Layout）或绘制（Paint）：