Несколько раз обмениваться изображениями с высокой частотой кадров на iOS + Javascript?

Question

Эй, все, что я пытаюсь реализовать, это что-то, где пользователь может перемещать ползунок и обновлять изображение, когда ползунок перемещается. Иногда частота кадров составляет ~ 30 кадров в секунду.

Что я пробовал:

• Используйте тег img и установите src непосредственно на соответствующее изображение.
• Используйте один div и установите свойство background-image для соответствующего изображения.
• Используйте один div для каждого изображения и настройте их z-индексы.
• Используйте один div для каждого изображения и настройте его непрозрачность.
• Используйте один div для каждого изображения и настройте их непрозрачность с помощью CSS3-анимации.
• Сохраняйте буфер изображений с настройкой непрозрачности или z-индекса и загрузкой правильного изображения.

Есть мысли? Или то, что я пытаюсь сделать, невозможно? Я также пытался использовать видео для той же цели, но время поиска слишком велико.

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

Answer 1

Методы, которые вы перечислили, устарели, так как вы разрабатываете приложение на платформе iOS. Вы можете использовать современную технику, такую ​​как canvas, чтобы нарисовать изображение, это очень быстро на iOS.

И насколько я знаю, canvas на 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

есть учебник