使用Angular JS和Snap SVG連續動畫

我想使用AngularJS和Snap SVG獲得流暢的連續動畫。我想我已經解決了這個問題。我的動畫運行平穩幾個小時。但是我在週末的Chrome，Opera，Safari和Firefox上運行了我的解決方案（Internet Explorer無法運行它）。當我今天上班時，Firefox和Opera都崩潰了，Chrome和Safari上的頁面都被凍結了。使用Angular JS和Snap SVG連續動畫

我的動畫功能如下：

 /* 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是否有其他機制來執行非終止循環？

來源

2015-07-13 Simon Brooke

我可能會寫一個指令，這個也... – probinson

會是更好的選擇是使用$interval()

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

你需要將它注入到你的控制器..

來源

2015-07-13 10:48:07 probinson

使用Angular JS和Snap SVG連續動畫

回答

相關問題