前端必学的动画实现思路!

前端必学的动画实现思路!插图亿华云

一个合理的动画是良好用户体验中必不可少的一部分。我们平常是怎样写动画的?CSS 中的 animation 和 transition,还有 requestAnimationFrame?

示例

请看下面的示例:

前端必学的动画实现思路!插图1亿华云

这是一个可添加的数字的随机乱序列表。首先想一想,我们第一直觉可能会这样做:将这些数字的 DOM 节点用绝对定位来布局,数字变化后计算 top、left 的值,再配合 transition 实现该动画。这种方式看似简单,其实内部要维护各种位置信息,所有坐标都需要手动管理,相当繁杂,非常不利于后期扩展。如果这些节点换成高度不固定的图片,那计算量可想而知。

那有没有一种更好的方式实现呢?肯定的,接下来介绍一个金光闪闪的概念:FLIP。

提前预览:

​​https://minjieliu.github.io/react-flip-demo​​​

FLIP

FLIP 其实是几个单词的缩写:即 First、Last 、Invert 、Play。

让我们分解一下:

First

涉及动画的元素的初始状态(比如位置、缩放、透明等)。

Last

涉及动画的元素的最终状态。

Invert

这一步为核心,即找出这个元素是如何变化的。例如该元素在 First 和 Last 之间向右移动了 50px,你就需要在 X 方向 translateX(-50px),使元素看起来在 First 位置。

这里有一个知识点值得注意,DOM 元素属性的改变(比如 left、right、transform 等),会被集中起来延迟到浏览器下一帧统一渲染,所以我们可以得到一个这样的中间时间点:DOM 位置信息改变了,而浏览器还没渲染[1]。也就意味着在一定的时间内,我们能获取 DOM 改变后的位置,但在浏览器中位置还未改变。经测试,这个过程超过 10ms 就显得不稳定了。因此 setTimeout(fn, 0)、 React useEffect 和 Vue $nextTick 都可以实现 Invert 过程。

Play

即从 Invert 回到最终状态,有了两个点的位置信息,中间的过渡动画就可以使用 transition 实现。本文采用 Web Animation API[2] 实现,动画执行过程中不会添加 CSS 到 DOM 上,相当干净。

前端必学的动画实现思路!插图2亿华云

实现

这里主要使用 React 方式实现该效果,其他框架原理都一样可参考。

一个列表,将子元素 5 列为一行:

.list {

display: flex;

flex-wrap: wrap;

width: 400px;

}

.item {

display: flex;

align-items: center;

justify-content: center;

width: 80px;

height: 80px;

border: 1px solid #eee;

}function ListShuffler() {

const [data, setData] = useState([0, 1, 2, 3, 4, 5]);

const listRef = useRef(null);

return (

{data.map((item) =

THE END
Copyright © 2024 亿华云