範圍設置後啓動svg動畫 - angularjs - svg

我做了一個包括路線圖的android遊戲。（5個世界，7停止每個地圖）範圍設置後啓動svg動畫 - angularjs - svg

如果級別爲3的用戶進行動畫處理的行走停止3.

我建立這個SVG動畫

<animateMotion id="test" begin="0.5s" dur="3s" repeatCount="0" rotate="0" path="{{animate}}" fill="freeze"/>

它工作正常，直到我做出的if else功能，其範圍應該使用。（每個路線圖有7站/水平，我的水平是3，它的作用域world1這樣的性質以及連接到頁面）

information.once("value", function(snapshot) { 
       var data = snapshot.val(); 

       if (data.level < 7) { 
        console.log("world1"); 
        $scope.animate = "M0,0 q225,150 0,200"; 

       } 


       else if (data.level > 7) { 
        console.log("world2") 
        $scope.animate = "M0,0 0,0 0,0"; 
        } 
    });

我覺得牛逼他的問題是，在if語句完成之前，svg會加載正確的範圍。

有什麼方法可以使用角度來啓動動畫嗎？而不是自動載入播放。

（在information.once和數據快照是火力點我的用戶數據的存儲位置）

來源

2016-01-08 Jurjen Folkertsma

這非常含糊。什麼是調用information.once（）的上下文？參見[創建一個mcve]（http://stackoverflow.com/help/mcve）和[如何提問]（http://stackoverflow.com/help/how-to-ask）。另外，爲了通知Angular編譯器，您需要在異步設置數據時調用$ scope.apply（）或$ timeout（）。請參閱[處理異步操作]（https://www.firebase.com/docs/web/libraries/angular/guide/intro-to-angularfire.html#section-async-intro）。 Docs FTW。 – Kato

爲了讓您上面的代碼工作，你可能只需要通知你的價值觀已經改變異步編譯器。有關Angular的異步操作的更多信息，請參閱this post。

但是，這裏最好的答案是充分利用這些工具的潛力，充分利用Angular和Firebase爲管理這些複雜問題提供的強大功能。對文檔進行良好的閱讀是以較少的痛苦和摩擦前進的好方法。

您可以use routes and the resolve method避免您的意見中的計時問題。

具體而言，您將在您的路線中加載數據，並且在數據下載完成之前不會呈現路線。利用AngularFire，你可以用$ loaded（）方法做到這一點。

app.config(function($routeProvider) { 
    $routeProvider.when("/home", { 
    controller: "HomeCtrl", 
    templateUrl: "views/home.html", 
    resolve: { 
     // controller will not be loaded until $waitForAuth resolves 
     // Auth refers to our $firebaseAuth wrapper in the example above 
     "syncedData": function($firebaseObject) { 
     var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/path/to/data"); 
     return $firebaseObject(ref).$loaded(); 
     } 
    } 
    }); 
});

現在在你的控制器，你可以簡單地調用注入的依賴性：

app.controller('HomeCtrl', function($scope, syncedData) { 
    // guaranteed to be loaded when this controller is rendered 
    $scope.syncedData = syncedData; 
});

你也可以將與核心火力地堡SDK這項工作，而不是使用AngularFire，它只會要求你創建它返回一個承諾，並使用路由器而不是$ firebaseObject服務：

app.factory('loadData', function($q) { 
    return function(ref) { 
     return $q(function(resolve, reject) { 
      ref.once('value', function(snap) { 
      resolve(snap.val()); 
      }, reject); 
     }; 
    } 
}); 

app.config(function($routeProvider) { 
    $routeProvider.when("/home", { 
    controller: "HomeCtrl", 
    templateUrl: "views/home.html", 
    resolve: { 
     // use our new service in the resolve instead 
     "syncedData": function(loadData) { 
     var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/path/to/data"); 
     return loadData(ref); 
     } 
    } 
    }); 
});

對於最後一個思想，還有機會傳福音如何閱讀文檔ŧ如果您使用Firebase一次（'value'...），則可能會真正鼓勵強大的API使用，但您可能會將實時數據庫的所有功能取代爲CRUD模型，從而使其無法實現。請參閱指南，瞭解如何在實時範例中使用Firebase。

來源

2016-01-08 21:48:43 Kato

你先生太棒了！謝謝！ –

範圍設置後啓動svg動畫 - angularjs - svg

回答

相關問題