javascript - 在 iOS + Javascript 上以高帧率反复交换图像？

Question

嘿，我想要实现的是用户可以滑动 slider 并在 slider 四处移动时更新图像的东西。有时帧速率约为 30 fps。

我尝试过的:

• 使用 img 标签并将 src 直接设置为相应的图像。
• 使用单个 div 并将背景图像属性设置为相应的图像。
• 为每张图片使用一个 div 并调整它们的 z 索引。
• 为每张图片使用一个 div 并调整它们的不透明度。
• 为每张图片使用一个 div，并通过 CSS3 动画调整它们的不透明度。
• 保留图像缓冲区以调整不透明度或 z-index 并加载正确的图像。

有什么想法吗？或者我想做的事情是不可能的？我也尝试过使用视频来达到同样的目的，但搜索时间太长。

const FPS = 60;
var self = this;
setInterval(
        function() {
                self.setCurrentImageByIndex((self._currentImageIndex + 1) % 169);
        },
        1000 / FPS
);

Answer 1

您列出的技术是过时的，因为您是在 iOS 平台上开发应用程序。您可以使用 canvas 等现代技术来绘制图像，在 iOS 上速度非常快。

据我所知，iOS 上的 Canvas 是硬件加速的。

下面是使用 Canvas 绘制图像的示例代码:

  function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    };
    img.src = 'images/backdrop.png';
  }

有一个tutorial在 MDN 上