javascript - 使用 snap.svg 无限旋转

Question

有没有办法让 svg 元素无限旋转？

Snap 提供了一种旋转一定量的方法，但是我怎样才能无限旋转呢？

Answer 1

有几种不同的方法可以做到这一点，正如 Alvin 和 Monkeyinsight 所说，您可以使用 CSS 来完成，也可以如前所述使用 SVG 标记来完成。我猜你不想要 SVG 标记，因为这可能就是你首先使用 Snap 的原因(尽管你总是可以将 element.parse( 作为中间阶段)

作为替代方案，有时您需要组合更复杂的位，我将展示如何使用回调在 Snap 中制作无限动画...

var s = Snap("#svg");

var block = s.rect(100, 100, 100, 100);

function infRotate( el ) {
    el.transform('r0,150,150'); // some kind of transform reset, or removing the previous completed transform maybe needed.
    el.animate({ transform: 'r360,150,150' }, 2000, mina.linear, infRotate.bind( null, el));
};

infRotate( block );

它在动画完成时有一个简单的回调，因此可用于更复杂的功能。

jsfiddle

我怀疑 CSS/SVG 标记解决方案会更高效，但与其他 Snap 内容一起使用时可能不太灵活。

编辑:如果它真的会运行很长时间，您可能需要关注内存。