重复使用Raphael.js动画使用越来越多的CPU时间

时间:2014-09-13 16:38:49

标签: javascript jquery animation raphael

有没有一种方法可以使用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

谢谢, 埃尔登

0 个答案:

没有答案