为此徽标设置动画效果

我想为此徽标设置动画效果。所有需要发生的事情都是让线路顺利移动到不同的位置。我有一个标志的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

来源

2012-09-15 RobinJ

您可以尝试车顶杆（？）用JavaScript隔离SVG路径内，它们的动画：http://srufaculty.sru.edu/david.dailey/svg/#JSAnim – Gregor

@Gregor我不擅长编辑矢量图像。 – RobinJ

有没有简单的方法，你可以动画你的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);

一个更强大的解决方案将使用这使得它易于添加缓和功能，在当前选项卡未激活不消耗资源。

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

来源

2012-09-18 02:56:31 Duopixel

这看起来不错！我会试一试。 – RobinJ

为此徽标设置动画效果

回答

相关问题