前端动画是网页中必不可少的一部分。有时候我们需要在应用程序中使用动画来增强用户体验，而 gsap-as-promised 是一个非常有用的 npm 包，它可以帮助我们完成复杂的 JavaScript 动画，同时保证在动画完成后会返回 Promise 对象，这篇文章将会教你如何使用它。
gsap-as-promised 是什么？
gsap-as-promised 是一个基于 GreenSock Animation Platform (GSAP) 的 npm 包。它提供了一个简单的 Promise 接口，可以很容易地提供一个 Promise 对象，以便在动画结束后执行回调。这意味着我们可以像使用 GSAP 一样来创建同样华丽的动画，同时还能受益于 Promise 对象的便利性。
gsap-as-promised 的安装
使用 npm 来安装 gsap-as-promised：
npm install gsap-as-promised
gsap-as-promised 的依赖包将自动安装。
gsap-as-promised 的使用
首先，我们需要在项目中添加 gsap-as-promised：
import {TweenMax, TimelineMax} from 'gsap-as-promised';这样，我们就可以像使用 GSAP 一样使用 gsap-as-promised。
import {TweenMax, TimelineMax} from 'gsap-as-promised';
const obj = {x: 0};
const tween = new TweenMax(obj, 1, {x: 100});
tween.then(() => console.log('动画完成！'));上面的代码创建了一个 TweenMax 动画，这个动画将 obj 对象的 x 属性从 0 变为 100，动画时长为 1 秒。
然后我们通过 .then() 方法来创建一个回调函数，在动画结束时将执行这个回调函数。
-- -------------------- ---- ------- ------ ---------- ------------ ---- ------------------- ----- --- - --- --- ----- ----- - --- ------------- -- --- ------ ------------- -- ---------------------- ------------------- -- -
在上面的代码中，动画完成后我们将执行 console.log('动画完成!')，同时这个 obj.x 的值仍然是 0。这是因为在 TweenMax 中，动画只是通过更新目标对象属性的值来实现的，所以在动画结束前，obj.x 的值不会发生任何变化。
同时，我们可以使用使用 timeline 对象来提供序列动画。
-- -------------------- ---- -------
------ ---------- ------------ ---- -------------------
----- --- - --- ---
----- -------- - --- --------------
---------------- -- --- -----
-------- -- --- ----- -------
-------- -- ----------------------
------------------ ------- -- -- ---------上面的代码创建了一个 TimelineMax 对象，然后添加了两个动画：第一个动画将 obj 对象的 x 属性从 0 变为 100，动画时长为 1 秒；第二个动画将 obj 对象的 y 属性从 undefined 变为 100，动画时长为 1 秒，延迟 0.5 秒开始。
最后我们又使用 .then() 方法来创建一个回调函数，在两个动画完成后将执行这个回调函数。
结论
gsap-as-promised 是一个非常实用的 npm 包，它允许我们使用 Promise 对象来跟踪动画的进程。无论何时，只要你需要在动画结束后执行回调函数，gsap-as-promised 都是你的好选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e1e81e8991b448dba5a