Javascript 设置此徽标的动画
我想动画这个标志。所有需要做的就是让线路平稳地移动到不同的位置。我有一个SVG版本的徽标。最简单的方法是什么?单独编辑每一帧,然后将其制作成动画GIF需要的时间太长,会使动画起伏,并且太大而无法加载 我不想使用像Flash这样不受欢迎的技术 最好的方法是什么 这是我想要实现的未完成版本Javascript 设置此徽标的动画,javascript,html,animation,svg,Javascript,Html,Animation,Svg,我想动画这个标志。所有需要做的就是让线路平稳地移动到不同的位置。我有一个SVG版本的徽标。最简单的方法是什么?单独编辑每一帧,然后将其制作成动画GIF需要的时间太长,会使动画起伏,并且太大而无法加载 我不想使用像Flash这样不受欢迎的技术 最好的方法是什么 这是我想要实现的未完成版本 巴布亚新几内亚 SVG 没有简单的方法可以让SVG保持原样。这是一个复合路径,找到正确的节点不仅麻烦,而且制作动画的成本也很高 您需要修改原始SVG以删除要设置动画的线条,然后可以添加线条,例如 <li
巴布亚新几内亚
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" />
一个更健壮的解决方案将使用requestAnimationFrame
,这使得在当前选项卡未激活时添加缓和功能变得容易,并且不会消耗资源
这是一个演示(您必须删除矢量编辑软件中的现有行)。
您可以尝试在SVG路径中隔离屋顶条(?),并使用JavaScript设置它们的动画:@Gregor我不擅长编辑矢量图像。这看起来很棒!我试试看。
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);