我想为这个 Logo 制作动画。所需要做的就是让生产线顺利移动到不同的位置。我有 Logo 的 SVG 版本。做到这一点最简单的方法是什么?单独编辑每一帧然后将它们制作成 GIF 动画会花费太长时间,使动画断断续续,而且太大而无法加载。
我不想使用 Flash 等已弃用的技术。
最好的方法是什么?
这是我想要实现的目标的未完成版本; http://heuvel-folie-serres.com/v2/img/logo_moving.gif
<小时/>PNG; http://heuvel-folie-serres.com/v2/img/logo.png
SVG; http://heuvel-folie-serres.com/v2/img/logo.svg
最佳答案
没有简单的方法可以让 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/
关于javascript - 动画化这个标志,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12438089/