HTML5의 SVG 이미지에서 애니메이션 재생

Question

비디오의 프레임과 유사한 방식으로 설정된 120 개의 SVG 이미지가 있다고 가정 해 보겠습니다. 이 SVG 이미지를 HTML 웹 페이지에 삽입하여 내가 완전히 제어 할 수있는 속도 (예 : 30 또는 60fps)로 재생할 수 있다고 가정합니다. 또한 웹 페이지의 벡터 그래픽으로 화면에 계속 표시되도록하여 사용자가 확대 한 거리에 관계없이 선명하게 보입니다. 그래서 본질적으로 래스터와는 반대로 벡터 인 비디오는 정말 짧습니다.

그래서 진짜 질문에; HTML에서 효율적으로이를 수행 할 수있는 방법이 있습니까? 또는 이렇게 많은 다른 벡터 그래픽 사이를 전환하면 몇 가지 심각한 지연 문제가 발생할 수 있습니다. 이 작업을 수행하는 좋은 방법이 있다면 예제를 제공해 주시겠습니까?

Answer 1

은 SVG가 얼마나 복잡한 당신이 최적화를 많이하지 않고 도전이 될 것입니다 충분히 빨리 DOM 객체를 교체 찾을 수에 따라

아주 간단한 자바 스크립트 (this answer 유용 디테일과 비교를 많이 포함) 예를 들어 이것을 달성하는 방법은 SVG 항목의 배열을 단계별로 실행하고 프레임 속도에 맞춰 설정된 setInterval 타이머에서 스왑하는 것입니다 (AndroidTV 앱에서 배경 로딩 애니메이션을 기반으로하는 코드를 사용했습니다. 꽤 안정적으로 일했다)

<svg height="200" width="200" id="svg"> 

</svg> 


<script> 

var fps = 30 
var f = 0 
var svgA = [ 
'<circle cx="50" cy="60" r="40" stroke="black"stroke-width="3" fill="red" />', 
'<circle cx="55" cy="62" r="42" stroke="black"stroke-width="4" fill="red" />', 
'<circle cx="60" cy="64" r="44" stroke="black"stroke-width="5" fill="red" />', 
'<circle cx="65" cy="66" r="46" stroke="black"stroke-width="6" fill="red" />', 
'<circle cx="70" cy="68" r="48" stroke="black"stroke-width="7" fill="red" />', 
'<circle cx="74" cy="70" r="50" stroke="black"stroke-width="8" fill="red" />', 
'<circle cx="77" cy="72" r="48" stroke="black"stroke-width="9" fill="red" />', 
'<circle cx="79" cy="74" r="46" stroke="black"stroke-width="8" fill="red" />', 
'<circle cx="80" cy="76" r="44" stroke="black"stroke-width="7" fill="red" />', 
'<circle cx="79" cy="74" r="46" stroke="black"stroke-width="6" fill="red" />', 
'<circle cx="77" cy="72" r="48" stroke="black"stroke-width="5" fill="red" />', 
'<circle cx="74" cy="70" r="46" stroke="black"stroke-width="4" fill="red" />', 
'<circle cx="70" cy="68" r="44" stroke="black"stroke-width="3" fill="red" />', 
'<circle cx="65" cy="64" r="42" stroke="black"stroke-width="2" fill="red" />', 
'<circle cx="55" cy="62" r="40" stroke="black"stroke-width="3" fill="red" />' 
] 

var i = setInterval(function() {nextFrame();}, 1000/fps); 


function nextFrame() { 
    document.getElementById("svg").innerHTML = svgA[f]; 
    f=(f+1)%svgA.length 
    if (f==0) { 
     clearInterval(i) 
    } 
} 

</script>