前言

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

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

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

视图之间的过渡

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

图片展开和收缩效果

如果要让动效更流畅，就要尽量的让样式计算的数量尽量的少，而且尽可能的快。关键是在动画中尽量的只使用transform和opacity。只不过，只使用transform和opacity是令人沮丧的。但幸运地是，FLIP可以让我们如何只使用transform来模拟布局变化。

FLIP是什么

FLIP是一种记忆设备和技术，最早是由@Paul Lewis提出的，FLIP是First、Last、Invert和Play四个单词首字母的缩写。这里简单的陈述一下：

First，指的是在任何事情发生之前（过渡之前），记录当前元素的位置和尺寸。可以使用getBoundingClientRect()这个API来处理，比如：

const first = el.getBoundingClientRect()

这句代码用于获取元素的边界 getBoundingClientRect()将会返回一个DOMRect对象，如下图所示：

Last：执行一段代码，让元素发生相应的变化，并记录元素在最后状态的位置和尺寸，比如:

// 通过给元素添加一个类名，设置元素最后状态的位置和大小 
//（在.totes-at-the-end中添加相应的样式规则）,布局发生了变化
el.classList.add('totes-at-the-end') 
// 记录元素最后状态的位置和尺寸大小 
const last = el.getBoundingClientRect()

Invert：计算元素第一个位置（first）和最后一个位置（last）之间的位置变化（如果需要，还可以计算两个状态之间的尺寸大小的变化），然后使用这些数字做一定的计算，让元素进行移动（通过transform来改变元素的位置和尺寸），从而创建它位于第一个位置（初始位置）的一个错觉：

const deltaX = first.left - last.left const deltaY = first.top - last.top 
const deltaW = first.width / last.width const deltaH = first.height / last.height

Play：将元素反转（假装在first位置），我们可以把transform设置为none，将其移动到last位置，让元素有动画效果：

elm.animate([ { transformOrigin: 'top left', transform: ` translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH}) ` }, { transformOrigin: 'top left', transform: 'none' }], { duration: 300, easing: 'ease-in-out', fill: 'both' } );

注意：在Play中使用了Web Animations API。如果从未接触过相关的API，点击这里了解

把所有代码合在一起，如下：

// 获取当前元素的边界 
const first = el.getBoundingClientRect() 
// 通过给元素添加一个类名，设置元素最后状态的位置和大小 （在.totes-at-the-end中添加相应的样式规则） // 布局发生了变化 
el.classList.add('totes-at-the-end') // 记录元素最后状态的位置和尺寸大小 
const last = el.getBoundingClientRect() 
const deltaX = first.left - last.left const deltaY = first.top - last.top 
const deltaW = first.width / last.width const deltaH = first.height / last.height elm.animate([ { transformOrigin: 'top left', transform: ` translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH}) ` }, { transformOrigin: 'top left', transform: 'none' }], { duration: 300, easing: 'ease-in-out', fill: 'both' } );

为了便于大家更好的理解FLIP技术制作的动效原理，借用下图向大家展示，或许更易于理解：

加上最后一个过程Play，实现的动画效果如下图所示：

特别声明：上面两张图来自于@davidkpiano在2017年的CSS Dev Conf分享的《FLIP ping out about animated layouts》的话题中

共享元素的过渡

在App应用中，视图的过渡和元素不同状态的过渡效果是一个非常常见的效果，其最基本的原则就是元素初始状态和最终状态不同。在Android中，这类似于共享元素转换，只不过元素在DOM中不会像在Android中那样从一个视图“回收”到另一个视图。

接下来我们来看一个FLIP的过渡效果：

简单的说明一下其计算过程：

// 首先获取点被点击图片的位置和尺寸 
let firstRect = itemImage.getBoundingClientRect(); 
// 然后获取详情的位置和尺寸 
let lastRect = detailItem.getBoundingClientRect(); // 详情到图片的动效 

detailItem.animate( [ { transform: ` translateX(${firstRect.left - lastRect.left}px) translateY(${firstRect.top - lastRect.top}px) scale(${firstRect.width / lastRect.width}) ` }, { transform: ` translateX(0) translateY(0) scale(1) ` } ], { duration: 600, easing: 'cubic-bezier(0.2, 0, 0.2, 1)' } ); 
// 详情的位置和尺寸 
let itemImageRect = itemImage.getBoundingClientRect(); 
// 原图片的位置和尺寸 
let detailItemRect = detailItem.getBoundingClientRect(); 
// 详情回到图片的动效 
itemImage.animate( [ { zIndex: 2, transform: ` translateX(${detailItemRect.left - itemImageRect.left}px) translateY(${detailItemRect.top - itemImageRect.top}px) scale(${detailItemRect.width / itemImageRect.width}) ` }, { zIndex: 2, transform: ` translateX(0) translateY(0) scale(1) ` } ], { duration: 600, easing: 'cubic-bezier(0.2, 0, 0.2, 1)' } );

总结

希望本文看了对大家的动画制作有帮助！