动画PNG图层和创建一个GIF在Javascript?

Question

我正试图找到一种方法来创建基于一组PNG图层的动画，也许能够通过CSS或一些库来动画它们，然后基于此，得到一个编码的base64 GIF。有这样的图书馆吗?

我的动画应该很简单，想象一下像一个垂直的堆/堆叠的物品，从顶部(在图像之外)，并下降到一定的底部位置，所以他们最终堆积在一起，互相接触，模拟一些重力。现在，我需要这是动态的，因为要堆叠的项是不同的，它们也可以是不同的顺序。

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

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

任何帮助或建议都将非常感谢:)

Answer 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的一个视频中看过这个技巧)