javascript - 在屏幕上连续动画 SVG

Question

我正在尝试为 SVG 对象制作动画，使其像这样连续穿过屏幕:

http://jsfiddle.net/PPVda/

但是我无法让它工作。我的猜测是因为 SVG 不适用于 CSS .animate。

所以我尝试改用 velocity.js。

我已经设法重新定位我的 svg 使用:

$.Velocity.hook($("#39aa995f-2ba5-4316-9c79-ef5b3d58d63d")[0], "translateX", "-300px");

并翻译它使用:

$("#39aa995f-2ba5-4316-9c79-ef5b3d58d63d").velocity({
    translateX: 4000,
  }, 9000);

为了让它连续不断，我使用了这个:

setTimeout(test(), 9000)

但是，它不会连续运行。

任何帮助都会很棒!谢谢。

Answer 1

试试这个:

$("#39aa995f-2ba5-4316-9c79-ef5b3d58d63d").velocity({
  translateX: [4000, -600],
},{
  duration: 9000,
  easing: "lnear",
 delay: 0
});

https://davidwalsh.name/svg-animation

我不建议使用回调来循环 SVG