0

我想为这个标志制作动画。需要做的就是让线条平稳地移动到不同的位置。我有一个 SVG 版本的徽标。最简单的方法是什么？分别编辑每一帧，然后将它们制作成动画 GIF 需要太长时间，使动画不连贯，并且太大而无法加载。

我不想使用 Flash 等已弃用的技术。

最好的方法是什么？

这是我想要实现的未完成版本；http://heuvel-folie-serres.com/v2/img/logo_moving.gif

巴布亚新几内亚；http://heuvel-folie-serres.com/v2/img/logo.png
SVG；http://heuvel-folie-serres.com/v2/img/logo.svg

4

1 回答 1

2

没有简单的方法可以按原样为 SVG 设置动画。这是一条复合路径，找到正确的节点不仅麻烦而且制作动画也很昂贵。

您需要修改原始 SVG 以删除您打算制作动画的线条，然后您可以添加线条，例如...

 <line x1="23" y1="32" x2="40" y2="32" class="animated" />
 <line x1="93" y1="32" x2="75" y2="32" class="animated" />
 <line x1="125" y1="32" x2="143" y2="32" class="animated" />
 <line x1="195" y1="32" x2="177" y2="32" class="animated" />

你可以使用动画，SMIL但不幸的是 IE9 不支持它，所以这里有一个非常幼稚的动画实现：

var lines = document.getElementsByClassName('animated');
var y = parseInt(lines[0].getAttribute("y2"));
var increment = .1;
var moveLines = function(){

    if (y < 32) increment = .1
    if (y > 41.5) increment = -.1
    y+=increment;
    lines[0].setAttribute('y1', y)
    lines[1].setAttribute('y1', y)
    lines[2].setAttribute('y1', y)
    lines[3].setAttribute('y1', y)
}

var t = window.setInterval(moveLines, 30);

将使用更强大的解决方案requestAnimationFrame，它可以轻松添加缓动功能，并且在当前选项卡未处于活动状态时不会消耗资源。

这是一个演示（您必须删除矢量编辑软件中的现有线条）。 http://jsfiddle.net/6WPEb/

​</p>

于 2012-09-18T02:56:31.117 回答