SVG 프레임 기반 애니메이션

Question

누구나 JPEG 기반의 svg에서 프레임 기반 애니메이션을 구현하는 가장 좋은 방법은 무엇입니까? 내가 찾은

한 예는 이것이다 :

<svg version="1.1" baseProfile="tiny" id="svg-root" 
    width="100%" height="100%" viewBox="0 0 480 360" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <image width="320" height="240" xlink:href="test1.jpg"> 
     <animate id='frame_0' attributeName='display' values='inline;none' 
       dur='0.5s' fill='freeze' begin="0s" repeatCount="indefinite"/> 
    </image> 

    <image width="320" height="240" xlink:href="test2.jpg"> 
     <animate id='frame_1' attributeName='display' values='none;inline' 
       dur='0.5s' fill='freeze' begin="0.5s" repeatCount="indefinite" /> 
    </image> 

</svg> 

그것은 2 개 프레임을 위해 작동하지만 정말 확장되지 않습니다. 100 프레임 이상을 처리 할 수있는 무언가를 갖고 싶습니다.

Answer 1

그것은 훨씬 쉽게 :

<svg version="1.1" baseProfile="tiny" id="svg-root" 
    width="100%" height="100%" viewBox="0 0 480 360" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <image width="320" height="240" xlink:href="test1.jpg"> 
    <animate attributeName="xlink:href" 
     values="test1.jpg;test2.jpg" 
     begin="0s" repeatCount="indefinite" dur="1s"/> 
    </image> 

</svg> 

Answer 2

다른 방법,

애니메이션이 작동하지만 파일 설정을 얻기 위해 너무 많이 생산 단지 문제라면, 당신은에 템플릿을 사용할 수 있습니다 SVG를 생성하십시오.

Grunt.Js과 같은 것을 사용하여 디렉토리의 모든 이미지를 읽은 다음 밑줄 템플릿을 사용하여 이미 파일 경로 배열에서 설정 한 방식으로 SVG 프레임을 빌드하십시오.

이 코드 스 니펫은 기본적으로 작동하지 않을 수도 있지만 거의 비슷합니다.

여기서 깡깡 파일은 폴더의 파일을 잡고 이미지인지 확인한 다음 배열로 푸시합니다.

// gruntfile.js // 

var fs = require('fs'); 
var path = require('path'); 
var _ = require("underscore"); 

grunt.registerTask('Build Animated SVG', function() { 

    var template = grunt.file.read("/path to SVG underscore template/"); //see SVG section below. 

     var frames = []; 
     var pathtoframes = "mypath"; 
     var mySVG = "mysvg.svg"; 

     fs.readdirSync(path.resolve(pathtoframes)).forEach(function (file) { 

      if (filetype == "svg" || filetype == "png" || filetype == "jpg" || filetype == "gif") { 
       var frame = {}; 
       frame.src = pathtoframes + "/" + file; 
       frames.push(frame); 
      } 
     }); 

var compiledSVG = _.template(template, {frames:frames}); 

grunt.file.write(path.resolve(pathtoframes) + "/compiled_" + mySVG, compiledSVG); 

}); 

이 템플릿은 툴툴 거리는 파일에 의해 읽히고, 밑줄은 각 파일을 반복하여 큰 문자열로 씁니다. 그런트는로드 할 수있는 SVG로 저장합니다.

<!-- SVG underscore template --> 
    <svg version="1.1" baseProfile="tiny" id="svg-root" 
      width="100%" height="100%" viewBox="0 0 480 360" 
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 

      <% _.each(frames, function(frame, index){ %> 
      <image width="320" height="240" xlink:href="<%= frame.src %>"> 
       <animate 
         id='frame_<%= index %>' 
         attributeName='display' 
         values='none;inline' 
         dur='0.5s' 
         fill='freeze' 
         begin="0.5s" 
         repeatCount="indefinite" 
         /> 
      </image> 
     <% } %> 
    </svg>