有没有一种方法可以使用Raphael.js连续动画而不会使cpu时间继续增长?
我已尝试过.repeat(无限)以及单回拨和双回调功能。 .repeat(Infinity)在100秒内达到80%。 Ccallbacks要好得多(8分钟达到50%)但CPU时间仍然在增长。
请向http://jsfiddle.net/edelman/VSAED/查看显示此内容的其他人的示例。
var paper = new Raphael('spin', 100, 100);
var rect = paper.rect(20, 20, 20, 20).attr({fill: '#F00'});
var anim = Raphael.animation({transform: "r360"}, 2500).repeat(Infinity);
rect.animate(anim);
这是我的回调示例。
<script>
var r_canvas;
var spinEl;
$(document).ready (function () {
r_canvas = Raphael ("displayArea", "200", "200");
});
function showArrow (bUseRepeat) {
r_canvas.clear ();
var path = "M100,100L100,0";
spinEl = r_canvas.path (path).attr ({"arrow-end":"classic-wide"});
if (bUseRepeat)
Raphael.animation ({transform: "...r360, 100,100"}, 2000).repeat (Infinity);
else
spin ();
};
function spin () {
spinEl.stop ();
var spinSpec = Raphael.animation ({transform: "...r360, 100,100"}, 2000, respin);
spinEl.animate (spinSpec);
};
function respin () {
spinEl.stop ();
var spinSpec = Raphael.animation ({transform: "...r360, 100,100"}, 2000, spin);
spinEl.animate (spinSpec);
};
function stopArrow () {
spinEl.stop ();
};
</script>
Raphael.js v 2.1.2 FireFox 26.0 Fedora 18
谢谢, 埃尔登