为 PNG 图层制作动画并在 Javascript 中创建 GIF？答案

【问题标题】：Animate PNG layers and create a GIF in Javascript?为 PNG 图层制作动画并在 Javascript 中创建 GIF？
【发布时间】：2021-10-31 05:46:06
【问题描述】：

我正在尝试找到一种方法来创建基于一组 PNG 图层的动画，也许能够通过 CSS 或某些库为它们制作动画，然后在此基础上获得编码的 base64 GIF。有没有这样的图书馆？

我的动画应该很简单，想象一下垂直的一堆/一堆物品，从顶部（超出图像）下降到某个底部位置，因此它们最终堆叠在一起，相互模拟一些重力。现在，我需要它是动态的，因为要堆叠的项目是不同的，它们也可以是不同的顺序。

我已经在处理这个问题，但我想知道是否有任何 Javascript 库可以进行这种转换并允许我为每一层设置动画。

对于一个旧项目，我使用了来自 Lookchilds 的名为 "merge-images" 的库。但这仅适用于将普通 PNG 合并为单个 PNG。它使用 HTML Canvas 作为处理所有这些的媒介。

任何帮助或建议将不胜感激:)

【问题讨论】：

标签： javascript

【解决方案1】：

只需使用您的尺寸添加容器<div>，然后添加具有绝对定位的图像，以便它们能够相互叠加并正确定位。您可以使用z-index 或translateZ() 调整图层顺序

如果你有一个图像序列类型的东西，你可以使用类似的结构：

<img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 0ms">
<img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 5ms">
<img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 10ms">
<img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 15ms">

.anim-img {
  animation: anim;
  animation-delay: var(--anim-delay-offset);
}
@keyframes anim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

（在 Fireship 的一个视频中看到了这个技巧）

【讨论】：

是的，直到我得到它，但是我将如何基于此创建一个 GIF？你知道吗？我需要创建一个 GIF 文件。
我知道一种在 Python 中使用 PIL 的方法，而不是在 JS 中，但您也可以尝试使用 Lottie 之类的东西，它有一个 SVG 和一个 Canvas 渲染器。 Lottie JSON 文件基本上是 base 64 编码的图像序列，但它们更轻量级
我明白了，但在我的具体情况下，一切都是动态的，我不能使用 Lottie :( 我已经为各个图层制作了单独的 PNG 来制作动画。
啊，请问您是否需要它是base 64编码的gif？
抱歉，我没有一个很好的教程来说明如何做到这一点，但这里有一些资源：stackoverflow.com/questions/24688802/… 然后，如果你需要它编码，只需导入 base64 并使用这个函数：@ 987654328@