在前端开发中，我们经常需要使用动图来提高网页的视觉效果和用户体验。而 gif.js 是一个基于 JavaScript 的生成 GIF 动图的库，它可以让我们轻松地将多张图片转换为一个可播放的 GIF 动图，并且支持自定义帧率、尺寸和压缩等参数。
安装和引入
首先，我们需要使用 npm 安装 gif.js：
npm install gif.js
然后，在需要使用 gif.js 的文件中，我们可以通过以下方式引入：
import GIF from 'gif.js';
基本用法
假设我们有一组图片地址存储在一个数组中：
const imageUrls = [ 'https://example.com/image1.png', 'https://example.com/image2.png', 'https://example.com/image3.png', // ... ];
我们可以使用 gif.js 将这些图片转换为一个 GIF 动图：
-- -------------------- ---- -------
-- ---- --- --
----- --- - --- -----
-------- -- -- ------- ------ --
-------- --- -- ---------- ---------------
---
-- ----------------- --- -
----------------------- -- -
----- --- - --- --------
------- - ----
---------- - -- -- -
------------------
-- --------------- ---
-- --------------- --- ----------------- -
-------------
-
--
---
-- ------------- --- ----- ----------- - ---- --
------------------ ------ -- -
----- --- - --------------------------
----------------- -- --- --- --- --- --- --- -------
---自定义参数
除了基本用法外，gif.js 还提供了丰富的配置选项，让我们可以对生成的 GIF 进行更多的定制化。
帧率和循环次数
我们可以使用 setDelay() 方法来设置每帧之间的延迟时间（单位是毫秒），从而控制动画的播放速度。同时，我们也可以使用 setRepeat() 方法来设置动画的循环次数，默认为 0 表示无限循环。
-- -------------------- ---- -------
----- --- - --- -----
-------- --
-------- ---
------ ---- -- --- -------------
------- ---- -- --- -------------
------------ ---------- -- --------------- ---- --
------- -- -- ------ ------
---
----------------------- -- -
----- --- - --- --------
------- - ----
---------- - -- -- -
----------------- - ------ --- --- -- ------ -----
-- --------------- --- ----------------- -
-------------
-
--
---压缩质量和颜色表
我们可以使用 setQuality() 方法来控制生成的 GIF 的压缩质量。取值范围为 1-100，数字越大表示质量越好，但文件大小也会越大。
-- -------------------- ---- -------
----- --- - --- -----
-------- --
-------- --- -- ----- --
---
----------------------- -- -
----- --- - --- --------
------- - ----
---------- - -- -- -
------------------
-- --------------- --- ----------------- -
------------------ -- ------- -
-------------
-
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------