设置范围后启动 svg 动画 - angularjs - svg答案

【问题标题】：Start svg animation after scope is set - angularjs - svg设置范围后启动 svg 动画 - angularjs - svg
【发布时间】：2023-03-22 07:52:01
【问题描述】：

我正在制作一个包含路线图的安卓游戏。（5 个世界，每张地图 7 个站点）

如果级别为 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";
                  }
   });

我认为问题在于 svg 在 if else 语句完成选择正确的范围之前加载。

有什么方法可以使用 Angular 启动动画吗？而不是自动加载播放。

（information.once 和数据快照用于存储我的用户数据的 firebase）

【问题讨论】：

这是非常模糊的。调用 information.once() 的上下文是什么？请参阅 creating an mcve 和 how to ask。此外，您需要在异步设置数据时调用 $scope.apply() 或 $timeout() 以通知 Angular 编译器。见Handling Async Operations。文档 FTW。

标签： javascript angularjs animation svg firebase

【解决方案1】：

要使上述代码正常工作，您可能只需要通知编译器您的值已异步更改。有关 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; 
});

您也可以使用核心 Firebase 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);
      }
    }
  });
});

最后一个想法，以及另一个宣传彻底阅读文档如何真正鼓励 API 的强大使用的机会，如果您在 Firebase 中使用 once('value'...)，您可能会取消所有通过用 CRUD 模型替换实时数据库的强大功能。请参阅指南，了解在实时范例中使用 Firebase 的一些好方法。

【讨论】：