流星动画

Question

我正在开展纸牌游戏项目，我现在面临的一个问题是动画。我无法弄清楚如何正确地为卡片设置动画，以便两个用户同时看到它的动画，以及正确的位置。而且我的意思是，当你的对手拿出一张牌时，你会看到一张卡片从对手的牌组进入他手中的动画，而对于对手来说，动画是从他的牌组进入他的手中。

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

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

我正在尝试制作动画的卡片收藏品有一个卡片的放置字段（手，卡片，放置等等）。 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>

是否可以根据之前的位置为卡片制作动画？ 就像卡片在卡片中一样，然后移动到手中，将运行特定的动画。同样从手到甲板。 感谢。

Answer 1

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

玩家A抽一张牌：

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

如果这是动画时间变化的原因，那么解决方案是阻止玩家A的浏览器模拟触发动画的数据库更新。换句话说，第一台了解卡片绘制的机器应该是服务器，它可以在几乎同时将这些新闻同步到两个玩家。有两种方法可以实现这一目标：

1. 在绘制卡片时，在更新数据库的函数中使用this.isSumulation。基本上，将数据库更新代码保留在if (!this.isSimulation)之类的块中，以便它只在服务器上执行。
2. 通过Meteor method完成卡片的绘制。因此，玩家A会绘制一张卡片，这会导致Meteor.call("drawCard")，这会导致drawCard方法在服务器上执行。 （userId在this内发送。drawCard。在/server文件夹或Meteor.isServer块中的文件中定义{{1}}方法，以便客户端无法查看其代码，这意味着它们无法模拟它。 / LI>

   无论哪种方式，数据库更新首先在服务器上进行，然后同时或多或少地同步到所有客户端，这应该在几乎同时触发动画。

   如果动画在不同时间发生的原因是因为您的客户的速度连接速度显着不同（即宽带连接和手机连接），则需要另外一套补偿技术。 。 。但由于这是一个流星问题，我假设你的问题是与流星有关，而不是一般的网络问题。如果我错了，请随意编辑您的问题，我或社区可以为Meteor发布一些延迟补偿技术。