用 Promise 实现的动画效果
随着前端技术的不断发展，动画效果的实现也变得越来越重要。而在实现动画效果时，我们通常会使用 setInterval 和 setTimeout 方法。这两个方法虽然简单易用，但是在某些特定的场景下，它们却往往无法满足我们的需求，并且也存在一些不可控的问题。针对这些问题，我们可以考虑使用 Promise，通过 Promise 来实现动画效果。
Promise 是一种异步编程的解决方案，它可以将异步操作包装成一个 Promise 对象，并通过 then 方法来进行任务的链式调用。在动画效果中，我们可以将每一帧的动画效果封装成一个 Promise 对象，然后使用 Promise 的 then 方法来进行任务的链式调用，实现动画的连续播放并且避免了 setInterval 和 setTimeout 的不可控问题。
下面我们来看一下使用 Promise 实现动画效果的具体方式：
1.封装动画效果
首先我们需要将每一帧的动画效果封装成一个 Promise 对象。这里我们以一个简单的动画效果为例，让一个元素在屏幕上向右移动。我们可以使用 CSS 的 transform 属性来实现元素的移动，并且使用 requestAnimationFrame 方法来触发动画效果。将这个动画效果封装成 Promise 对象的代码如下：
-- -------------------- ---- -------
-------- -------------- --------- --------- -
-- ------
--- --------- - -----
-- ---------
--- --------- - ---------------
-- ---------
--- ---------- - --------- - ---------
-- -------- ------- --
------ --- --------------- -- -
-------- ----------------- -
-- ----------------
-- ------------ -
--------- - ------------
-
-- ---------
--- ----------- - ----------- - ----------
-- ----------------------
-- ------------ -- --------- -
------------------- - ----------------------------
----------
-------
-
-- ------
--- ----------- - --------- - -------- - ------------ - ----------
------------------- - -------------------------------
-- --------
----------------------------
-
-- ----
----------------------------
---
-在这个动画效果的实现中，我们首先记录了动画开始的时间和元素的初始位置，然后计算元素的目标位置。接下来，在 move 函数中，我们通过计算已经经过的时间，计算出当前元素的位置，并通过设置 transform 属性来实现元素的移动。如果已经经过的时间超过了动画总时间，我们就结束动画，并调用 resolve() 方法来结束 Promise 链式调用。
2.链式调用动画效果
有了上面的动画效果封装后，我们就可以使用 Promise 的 then 方法来进行任务的链式调用，实现连续播放动画效果。假设我们有三个元素需要进行动画移动，分别移动不同的距离和不同的持续时间，我们可以使用代码如下：
-- -------------------- ---- ------- -- -------- --- ---- - -------------------------------- --- ---- - -------------------------------- --- ---- - -------------------------------- -- -------- --------------- ---- ----- -------- -- --------------- ---- ------ -------- -- --------------- ---- -------
在这段代码中，我们首先使用 document.querySelector 方法获取三个元素的对象，并通过 moveRight 函数分别移动它们的位置。然后我们依次使用 Promise 的 then 方法将这三个动画效果进行链式调用，实现了连续播放动画的效果。
需要注意的是，虽然我们通过 Promise 实现动画效果，但是这里的动画效果依然是运行在浏览器的主线程上的，也就是说它依然有可能会受到其他 JavaScript 操作的阻塞。如果我们需要实现更高级的动画效果，比如在大型 Canvas 应用中需要实时更新频率很高的动画效果，我们还需要考虑使用 Web Worker 或者 Canvas API 来实现。
总结
通过使用 Promise 来实现动画效果，我们可以有效地避免 setInterval 和 setTimeout 的不可控问题，并且还能够实现任务的链式调用，使得动画效果更加自然流畅。在实际开发中，我们可以根据具体场景，选择不同的技术方案，来实现更加高效和优质的动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65911538eb4cecbf2d652da3