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);

您需要将其注入控制器..

使用Angular JS和Snap SVG进行连续动画

1 个答案: