在屏幕上连续动画 SVG

Question

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

但是我无法让它工作。我的猜测是因为 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
});

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

Animating SVG across the screen continuously