范围设置后启动svg动画-svg

Start svg animation after scope is set - svg

本文关键字：动画 -svg svg 启动 设置 范围      更新时间：2023-09-26

我正在制作一款包含路线图的安卓游戏。（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，它的范围是世界1，所以属性与页面连接良好）

   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语句选择正确的范围之前加载。

有没有任何方法可以使用角度开始动画？而不是自动加载播放。

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

要使上述代码正常工作，您可能只需要通知编译器您的值已异步更改。有关Angular异步操作的更多信息，请参阅本文。

但这里最好的答案是充分利用这些工具的潜力，并利用Angular和Firebase为您提供的管理这些复杂问题的强大功能。好好阅读一下这些文档是一个很好的方法，可以减少痛苦和摩擦。

您可以使用路线和解决方法来避免视图中的时间问题。

具体而言，您将在管线中加载数据，并在下载数据之前不渲染管线。利用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中使用一次（"value"…），你可能会用CRUD模型取代实时数据库，从而抵消实时数据库的所有功能。请参阅指南，了解在实时范例中使用Firebase的一些好方法。

相关文章：