javascript - 从 Adob​​e Illustrator 对象创建动画 SVG/GIF 图像

Question

我想为我的 slider 创建一个动画背景图像。我也已经有了我想要动画的对象(在插画家中)。现在我想让这些对象在图像中随机移动。唯一的一点是，我完全不知道如何做到这一点，特别是因为我想要移动这些对象，而不是一些 HTML、JS 或 CSS 创建的对象。有什么办法可以做到这一点吗？

我已经在谷歌上搜索了几个小时，我所能找到的只是创建 CSS/JS 对象/粒子，然后它们会随机移动，或者在 Illustrator 中创建粒子。让我的对象四处移动不是很简单吗？

甚至不需要与鼠标交互或确定对象的数量。我只是想让它们随机移动。

亲切的问候!

Answer 1

您可以将对象导出为 PNG/SVG 并编写 JS 以在循环中随机为它们设置动画。

这是一个类似的Example .您可以用图像元素替换 div 元素，并根据需要修改 JavaScript。

以下两行用于生成相对于用户视口(viewport)的随机位置。

var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);

如果您不太熟悉编码，您可以将您的对象(矢量)从您的 .AI 文件直接导入 Adob​​e Animate，制作您的动画循环并以 JavaScript/HTML 发布。