javascript - 使用多个 Javascript 源文件的浏览器动画

问题描述

我有两个 Javascript 文件，都设置为从 base64 生成图像。第一个名为static.js的脚本如下所示。

var element = new Image();
  element.src = "data:image/png;base64,..."
  document.body.appendChild(element);

我可以使用以下代码将脚本嵌入到我的网站中，并且图像显示没有问题。（要查看完整代码，包括 base64，请转到此处）

<body>
  <script src="./static.js"></script>
</body>

同样，我在CodePen上找到了takashi的第二个脚本，它将base64 图像转换为动画故障。我能够获取该代码并使用与静态代码相同的 base64 图像对其进行修改，但存在故障（抱歉，即使没有我的 base64 图像，代码也很长，所以我只包含了链接）。我的图像的代码可以在这里看到。请注意，虽然 CodePen 在同一页面上显示 HTML 和 Javascript，但我将其拆分为单独的文件。

同样，如果我将脚本嵌入到网页中，它可以正常工作。

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
  <script src="./glitch.js"></script>
</body>

我遇到的问题是，这两个代码都没有专用的 javascriptfunction()属性，所以它们工作的唯一方法是如果我嵌入上述代码。为简洁起见，使用静态图像，如果我添加专用功能：

function isStatic() {
var element = new Image();
  element.src = "data:image/png;base64,..."
  document.body.appendChild(element);
}

然后尝试回调，


<body>
  <script src="./static.js">
    isStatic();
  </script>
</body>

图像不再出现在网页上。当我尝试将整个脚本包装到一个函数中然后尝试回调时，故障图像上也会发生同样的情况。

我试图将每个 JS 文件转换为函数的主要原因是这样我就可以将两者合并为一个文件（我这样做了），然后使用像这样的嵌入式脚本

<script>
  setInterval(function(isStatic) {
    // This will be executed every 9 seconds
  }, 9000);

  setInterval(function(isGlitch) {
    // This will be executed every 2 seconds
  }, 2000);
</script>

创建一个从静态切换到故障的图像，然后再返回。

由于我无法成功地将每个 JS 文件/脚本变成它自己的函数，我想弄清楚是否有更好的方法将我的静态和Glitch JS 脚本组合成一个，或者是否有一种方法可以我可以将网页设置为单独调用每个脚本文件，从而创建一个来回切换的静态和故障图像循环。

我已经搜索了谷歌网络，寻找任何描述我试图在视觉上做的事情，但绝对没有任何东西可以展示，但有一大堆脚本以各种方式使文本和/或图像出现故障（只是不知道如何使它们一开始是静态的，然后随机出现故障）。基本上我想用我的两个脚本做的是

 - run static image (script or call) for *x* seconds (120-180 seconds)
 - run glitched image (script or call) for *x* seconds (3-5 seconds)
 - reset (loop) the sequence

为了创建单个图像的外观，该图像似乎由于未知原因而随机出现故障。

标签： javascriptjqueryhtml

在您澄清评论后编辑答案：

您的代码使用了一个名为 p5 的库，它控制您的动画时间，所以我之前的回答是无关紧要的。如果您只想更改故障发生的频率，您几乎已经拥有了所需的一切。glitch.js 文件已经有一个标志来打开和关闭故障 ( this.throughFlag)。而且，它在第 226 行的毛刺之间已经有了轻微的随机延迟：

setTimeout(() => {
                this.throughFlag = true;
            }, floor(random(40, 400)));

第二个参数控制在设置之前setTimeout等待多长时间（从而再次开始出现故障）。你只需要使这个数字更长。为此，您希望延长超时时间，即将它乘以某个常数，我将其称为.this.throughFlagtruedelayFactor

const delayFactor = 10;
setTimeout(() => {
                this.throughFlag = true;
            }, delayFactor * floor(random(40, 400)));

在这里查看它的实际应用。

javascript - 使用多个 Javascript 源文件的浏览器动画

问题描述

解决方案

推荐阅读