为什么我的 Raphael JS 动画不循环？答案

【问题标题】：Why won't my Raphael JS animation loop?为什么我的 Raphael JS 动画不循环？
【发布时间】：2010-11-09 21:07:56
【问题描述】：

你好我使用 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();
}

【问题讨论】：

标签： javascript animation raphael

【解决方案1】：

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

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

【讨论】：

是的！你是传奇人物德米特里。非常感谢。给你一颗金星（旋转）。
经过一千个小时试图知道出了什么问题，我发现 sintax 是：transform:"r180" 而不是 rotarion:180。框架变了吗？介意编辑帖子以添加此信息吗？
如果您使用的是 2.0 版，这不再是正确答案。 This is，不过。

【解决方案2】：

自从第 2 版出来后，真正实现无限循环动画的方法是这样的：

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

Infinity 是 property in Javascript，所以不要将其作为字符串输入。

这是一个有效的fiddle。

【讨论】：

【解决方案3】：

只是一个快速的观察：

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

例如：

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

【讨论】：

【解决方案4】：

我同意迈克尔·毛的观点，你应该把

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

在一个循环中。

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

【讨论】：

【解决方案5】：

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

尝试改变：

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

到

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

编辑
事实证明，这根本不是问题——我不知道问题是什么（希望对 Raphael 库有更多了解的人可以提供帮助），而是一个笨拙但有效的解决方案是在调用回调中的整个构造函数之前清除有问题的元素（我警告过你它很笨拙）。

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

【讨论】：

不是这样的。功能已定义。从 JavaScrupt 语言的角度来看，您的构造是绝对平等的
@avok00 -- 完全正确 -- 我不认为这是问题所在，但我不确定......感谢您的提醒！
avok00，这当然不是问题，但是这两个结构并不是“绝对相等的”。 :)

【解决方案6】：

我不太确定，但如果你这样做会怎样：

while(true){starSpin();}

听起来这个方法只执行了一次，所以它“旋转”了一次……

【讨论】：

这个想法是动画在完成时接受回调。像您答案中的那种无限循环在客户端开发中并不常见，因为它们可能导致 UI 线程挂起。