在前端开发中，经常会使用到一些动画效果，其中加载动画是非常经典的一种，在实现加载动画的过程中，常常需要用到一个非常优秀的 npm 包 —— elegant-spinner，它提供了多种样式的加载动画。
但是，在使用该包的时候，我们需要用到它的类型声明，这就需要我们引入 @types/elegant-spinner 包。本文将详细介绍 @types/elegant-spinner 包的使用方法及注意事项，帮助初学者更快上手。
安装 @types/elegant-spinner 包
在进行使用前，首先需要安装 @types/elegant-spinner 包，使用以下命令进行安装：
npm install @types/elegant-spinner
使用示例
以下是一个简单的使用示例，用于让读者快速了解 @types/elegant-spinner 包的使用方式：
-- -------------------- ---- ------- ------ -------------- ---- ------------------ ------ --------- ---- ------------- ----- ----- - ----------------- ----- ------- - ------------- ----- ----- - -------------- -- - --------------------- ------------- -- ---- ------------- -- - --------------------- ---------------- -- ------
以上示例代码表示，在每隔 50ms 的时间间隔内更新控制台的输出内容，在输出的内容中包含一个旋转的加载动画及 "Loading..." 的文字提示，该动画在 5s 后停止。
详解
导入 ElegantSpinner
首先，我们需要在代码中导入 elegant-spinner，并初始化一个 ElegantSpinner 实例。
import ElegantSpinner from "elegant-spinner"; const frame = ElegantSpinner();
使用 ElegantSpinner 构造函数创建一个带有回调的实例，frame 是一个函数，将返回 elegant-spinner 动画中当前帧的字符。例如，上面示例中，当 frame() 被调用时，它将返回加载动画中的当前帧字符。
控制台输出
在上面的示例代码中，我们引入了一个叫做 log-update 的包，这个包的作用是控制台输出的覆盖层。
我们使用 logUpdate 方法输出我们的加载动画并附带文字提示，每 50ms 更新一次。
-- -------------------- ---- ------- ------ -------------- ---- ------------------ ------ --------- ---- ------------- ----- ----- - ----------------- ----- ------- - ------------- ----- ----- - -------------- -- - --------------------- ------------- -- ----
上面这段代码会使控制台输出一个带有加载动画的提示，并在其后附带 "Loading..." 的文字提示。
清除计时器并停止输出
回到上面的示例代码，我们使用 setTimeout 函数在 5s 后停止输出。
setTimeout(() => {
clearInterval(timer);
logUpdate(`\n`);
}, 5000);我们调用 clearInterval 函数来清除计时器，从而停止动画。注意在输出的最后一行打印换行符 \n。
结语
本文介绍了 @types/elegant-spinner 包的使用方法及注意事项，并给出了一个简单的示例，希望读者通过本文的学习，能更快地掌握 @types/elegant-spinner 包，并在日常工作中使用到加载动画的场景中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc94eb5cbfe1ea061235b