使用 Angular JS 和 Snap SVG 的连续动画

Question

我正在尝试使用 AngularJS 和 Snap SVG 获得流畅的连续动画。我以为我已经解决了问题；我的动画流畅地运行了几个小时。但我让我的解决方案在周末在 Chrome、Opera、Safari 和 Firefox 中运行（Internet Explorer 根本无法运行它）。今天早上我上班时，Firefox 和 Opera 都崩溃了，Chrome 和 Safari 上的页面都冻结了。

我的动画功能如下：

        /* the centre of the hub in this drawing */
        var hubCentre = "269, 367";

        /* the time to complete an animation move */
        var moveTime = 100;

        /* the Angular module name I'm defining */ 
        var turbineApp = angular.module('spinningTurbine', []);

        /* the controller for that module */
        turbineApp.controller('turbineController', ['$scope', function ($scope) {
            $scope.speed = 0;
            $scope.angle = 0;
            $scope.height = 150;

            /**
             * rotate the element with the specified tag about the hub centre location
             * to indicate the specified value.
             */
            $scope.sweep = function( tag, angle) {
                var elt = Snap(tag);

                var directive = "r" + angle + ", " + hubCentre;

                elt.animate({
                    transform: directive
                }, moveTime);
            }

            function spinner() {
                setTimeout( function() {
                    $scope.angle += parseFloat($scope.speed);
                    $scope.sweep( '#blades', $scope.angle);
                    spinner();
                }, moveTime);
            }       

            spinner();
        }]);

我的问题是，JavaScript setTimeout() 函数是否消耗资源（例如堆栈）？或者 Snap SVG 是否消耗资源，例如通过不断延伸转型路径？

理想情况下，我希望这个动画无限期地运行，所以我需要找出导致浏览器崩溃的原因，或者使用不同的机制对其进行重新编码。 Angular JS 是否有其他机制来执行非终止循环？

Answer 1

更好的选择是使用$interval()

$interval(function() {
                   ... Do Cool Stuff Here
                }, moveTime);

你需要将它注入你的控制器..