我想在实时服务器上为图像序列滚动提供流畅的动画答案

【问题标题】：I want smooth animation on live server for image sequence scroll我想在实时服务器上为图像序列滚动提供流畅的动画
【发布时间】：2022-10-15 22:56:52
【问题描述】：

我在这个动画中使用canvas。动画在本地主机上运行良好，但在实时服务器上花费了太多时间。

这是因为我为这个动画使用了将近 3000 帧，所有帧都很重要。如何提高实时服务器的加载速度？

我附上了代码。如果我在某个地方错了，请检查它并帮助我。

const html = document.documentElement;
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
const frameCount = 2999;
const currentFrame = index => (`compressed/${index.toString().padStart(9, '720_0000')}.jpg`)
const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
  }
};

const img = new Image()
img.src = currentFrame(1);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
img.onload = function() {
  scaleToFill(this);
}

function scaleToFill(img) {
  var scale = Math.max(canvas.width / img.width, canvas.height / img.height);
  var x = (canvas.width / 2) - (img.width / 2) * scale;
  var y = (canvas.height / 2) - (img.height / 2) * scale;
  context.drawImage(img, x, y, img.width * scale, img.height * scale);
}

const updateImage = index => {
  img.src = currentFrame(index);
  context.drawImage(img, 0, 0);
}

window.addEventListener('scroll', () => {
  const scrollTop = html.scrollTop;
  const maxScrollTop = html.scrollHeight - window.innerHeight;
  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(
    frameCount - 1,
    Math.ceil(scrollFraction * frameCount)
  );
  requestAnimationFrame(() => updateImage(frameIndex + 1))
});

preloadImages()

&lt;canvas id="hero-lightpass"&gt;&lt;/canvas&gt;

【问题讨论】：

您正在尝试加载三千个单独的图像，以显示一个动画？“如何提高直播服务器的加载速度？”- 通过使用视频反而 ...？
您可以将其转换为视频，然后使用压缩工具使其重量轻
这种动画有什么解决方案吗？请帮忙..
研究“精灵表”。
@RoryMcCrossan 谢谢...但实际上，我使用的是像视口这样的全尺寸图像。而且我认为精灵表仅适用于动画角色。正确的？

标签： javascript jquery canvas html5-canvas

【解决方案1】：

可能在某些极端情况下您需要单独的图像，并且 cmets 中的建议（使用视频或 Sprite 表）不会做，如果您可以使用其中一个，您应该会简化很多......

但我将专注于我们有大量图像的边缘情况

如何做这样的事情的很好的例子是在线地图：

谷歌地图 (https://www.google.com/maps)
OpenStreetMap (https://www.openstreetmap.org/)

这些地图有很多图像，但它们不会一次全部下载，它们只下载和绘制需要的内容，在您的情况下，您可以预加载可能 50（你必须尝试看看什么是最好的）并下载 51, 52 ...，因为您正在绘制您预加载的第一个。

回到地图；他们使用“小”地图图块来绘制一个大马赛克，这里有几个图块：

你可以看到它们来自不同的服务器a & b，这是为了加快下载速度，浏览器对一次从一个服务器下载多少张图片有限制，更多详情见：
http://kb.mozillazine.org/Network.http.max-connections-per-server

简而言之：

仅下载和绘制需要的内容
使用多个服务器来托管您的图像

【讨论】：