基于 SVG 帧的动画

Question

谁能建议在 svg 中基于 JPEG 实现基于帧的动画的最佳方法是什么？

我发现的一个例子是这样的：

<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 帧，就像您已经从文件路径数组中设置它们一样。

这些代码 sn-ps 可能无法开箱即用，但非常接近。

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

Answer 3

https://michaelsboost.github.io/SVGAnimFrames/

为此，您可以轻松地使用我的库 SVGAnimFrames。只需调用 1 行代码...

SVGAnimFrames("#bounce svg", "repeat", "40", "0");

请参阅Github repo 了解如何使用它。

理想情况下，您最好的选择是使用 spritesheet 并逐帧制作动画，从而最大限度地减少不必要的 http 请求。