基於SVG幀的動畫

任何人都可以建議什麼是基於JPEG的svg中實現基於幀的動畫的最佳方式？我已經發現基於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幀或更多的東西。

來源

2012-11-09 BarsMonster

這是很容易：

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

來源

2012-11-09 22:07:27

這僅適用於Firefox。原始代碼適用於FF和Chrome： - | – BarsMonster

有趣的是，我在Linux上測試了Firefox，Chromium和Opera，他們三人都工作過！但確實，出於某種原因，Windows上的Chrome和Safari並不是。 –

這樣做的一個可能的缺點是幀不會被預加載。 –

的另一種方法，

如果你的動畫工作，但它只是一個太化生產以獲得文件設置的事，你可以使用模板生成你的SVG。

使用類似Grunt.Js的內容來讀取目錄中的所有圖像，然後使用下劃線模板構建SVG幀，就像您已經從文件路徑數組中設置SVG幀一樣。

這些代碼片段可能無法正常工作，但它非常接近。

這裏grunt文件抓取文件夾中的文件，檢查它們是否是圖像然後將它們推送到一個數組。

// 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); 

});

該模板將被grunt文件讀入，下劃線將遍歷每個文件並將其寫入大字符串。 Grunt然後將其保存爲可以加載的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>

來源

2015-04-12 20:38:00

基於SVG幀的動畫

回答

相關問題