流星中的动画

 

我正在制作一个纸牌游戏项目，而我现在面临的问题之一就是动画。 我无法弄清楚如何正确地对卡片进行动画制作，以便两个用户在同一时间看到它的动画效果，并找到正确的位置。 我的意思是，当你的对手拿到一张牌时，你看到一张从对手甲板上的卡片动画到他的手中，而对于对手来说，动画是从他的甲板到他的手中。

我试过使用jQuery动画，我只能做动画的一部分 - 不能代表对手的动画。

我也尝试了一些Atmosphere的软件包，但他们没有按我想要的方式工作。

我试图制作动画的卡片集合有一个卡片的地方场（手，甲板，drop ..等等）。 并且HTML中的每个元素都依赖于地点字段来获取卡片，例如： 

Template.playerHand.cards = () -> 
     Cards.find {userId: Meteor.userId(), place: "hand"}

和HTML是： 

<ul class="holder">
   {{#each cards}}
      <li><img src="{{card.image}}" /></li>
   {{/each}}
</ul>

根据以前的地方，是否可以对卡进行动画处理？ 就像一张卡片放在甲板上，然后移动到手边，一个特定的动画就会运行。 从手到甲板也一样。 谢谢。

很难用很少的代码来诊断这个，但我猜这样的事情正在发生：

玩家A抽牌：

  • 玩家A几乎立即看到动画。 这是因为当卡被抽出时（例如卡集合中的更新）被调用的任何代码被模拟客户端用于玩家A，其在服务器甚至知道卡已经被抽出之前立即触发动画。
  • 玩家B在几秒钟后看到动画。 这是因为玩家B需要等待卡片代码（卡片集合中的更新）从玩家A的浏览器同步到服务器，然后从服务器返回到玩家B的浏览器。

    • 如果这是动画时间变化的原因，那么解决方案是阻止播放器A的浏览器模拟触发动画的数据库更新。 换句话说，第一台学习卡片的机器应该是服务器，它可以在大致相同的时间将这些新闻同步到两个玩家身上。 有两种方法可以实现这一点：

  • 在绘制卡片时更新数据库的函数中使用this.isSumulation 。 基本上，将数据库更新代码保存在if (!this.isSimulation)等块中，以便它只在服务器上执行。
  • 通过Meteor方法来实现卡的绘制。 所以玩家A会画一张卡片，这会导致Meteor.call("drawCard") ，然后使drawCard方法在服务器上执行。 （ userId在this发送）。 在/server文件夹或Meteor.isServer块中的文件中定义drawCard方法，以便客户端无法看到其代码，这意味着它们无法模拟它。

    • 不管怎样，数据库更新首先发生在服务器上，然后同时或多或少地同步到所有客户端，这应该几乎同时触发动画。

    如果动画在不同时间发生的原因是因为你的客户的速度连接有很大差异（例如宽带和手机上的连接），那么需要一整套其他的补偿技术。 。 。 但由于这是一个流星问题，我假设你的问题是与流星有关，而不是一般的网络问题。 如果我错了，随时编辑你的问题，我或社区可以发布流星的一些滞后补偿技术。

    链接地址: http://www.djcxy.com/p/84231.html

    上一篇: Animations in Meteor

    下一篇: What are the key differences between Meteor, Ember.js and Backbone.js?