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

这些代码段可能无法开箱即用，但它非常接近。

这里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 请求。

SVG基于帧的动画

3 个答案: