Question

嘿所有我想要实现的是用户可以滑动滑块并在滑块移动时更新图像。有时帧速率约为30 fps。

我尝试过：

使用img标签并将src直接设置为相应的图像。
使用单个div并将background-image属性设置为相应的图像。
为每个图像使用一个div并调整它们的z-indices。
为每张图片使用一个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绘制图像的示例代码：

  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';
  }

MDN上有tutorial

在iOS + Javascript上以高帧率重复交换图像？

1 个答案: