为什么我的 Raphael JS 动画不循环播放？

Question

你好呀 我使用 Raphael 框架制作了这个动画。我希望星星（logoStar）无限旋转，但它只运行一次。有人可以帮忙吗？谢谢

window.onload = function () {
buildLogo();
}

var buildLogo = function () {
    var logo = Raphael("title",800,236);

    var logoStar = logo.path("M12.245 131.057L16.039 138.743L24.521 139.974L18.383 145.958L19.832 154.406L12.245 150.418L4.658 154.406L6.108 145.958L-0.03 139.974L8.452 138.743").attr({fill:"#fff",stroke:"none"});

    var starSpin = function () {
        logoStar.animate({rotation: "360"}, 5000, starSpin);
    }
    starSpin();
}

Answer 1

var starSpin = function () {
    logoStar.attr({rotation: 0}).animate({rotation: 360}, 5000, starSpin);
}

从360°到360°的动画看起来没有动画，所以之前需要将旋转重置为零。

Answer 2

自从版本 2 推出以来，拥有无限循环动画的真正方法是这样的：

var spin = Raphael.animation({transform: "r360"}, 2500).repeat(Infinity);
myElement.animate(spin);

Infinity 是一个 Javascript 中的属性，因此不要将其作为字符串输入。

这是一个有效的小提琴。

Answer 3

只是一个快速观察：

从版本 2 开始，“旋转”似乎不再是 Atrr 的一部分，因此您不能在“动画”中使用它，但您可以将其替换为“transform：”r“+（某种程度上)"..

例如：

 element.animate( {transform: "r" + (-90)}, 2000, 'bounce');

Answer 4

我同意 Michael Mao 的观点，你应该加入

logoStar.animate({rotation: "360"}, 5000, starSpin);

一个循环。

但像 while(true) 这样的循环并不总是一个好主意。它会占用太多 CPU，并且某些浏览器可能会警告用户脚本导致页面运行缓慢。也许最好在重新执行动画之前添加超时。尝试看看什么最有效；）

Answer 5

我不完全确定，但我认为当您尝试在匿名函数中使用starSpin时，它尚未定义。

尝试将：

var starSpin = function () {
    logoStar.animate({rotation: "360"}, 5000, starSpin);
}
starSpin();

更改为

function starSpin() {
    logoStar.animate({rotation: "360"}, 5000, starSpin);
}
starSpin();

编辑
事实证明，根本不是这样的——我不知道问题是什么（希望对拉斐尔图书馆有更多了解的人可以提供帮助），但是一个kludgey-but-work的解决方案是在调用回调中的整个构造函数之前清除有问题的元素（我警告过你这是杂乱的）。

参见： http://jsfiddle.net/rbf5x/1/

Answer 6

我不太确定，但是如果你这样做怎么办：

while(true){starSpin();}

听起来该方法只执行一次，所以它“旋转”一次......