iOS + Javascript에서 높은 프레임 속도로 반복적으로 이미지를 스왑합니까?

Question

안녕하세요, 구현하려는 모든 것은 사용자가 슬라이더를 슬라이드하고 슬라이더가 움직일 때 이미지를 업데이트 할 수있는 곳입니다. 때때로 프레임 속도는 ~ 30fps입니다.

내가 시도하는 것 :

• 는 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에서 매우 빠릅니다.

그리고 iOS의 캔버스가 하드웨어 가속화 된 것으로 알고 있습니다. 여기

캔버스 사용하여 이미지를 그리는 예제 코드 :

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이를