流星中的动画

Animations in Meteor

本文关键字：动画 流星      更新时间：2023-09-26

我正在做一个纸牌游戏项目，我现在面临的问题之一是动画。我只是不知道如何正确地设置卡片的动画，以便两个用户都能同时看到它的动画，并找到正确的位置。我的意思是，当你的对手抽到一张牌时，你会看到一张牌从对手的牌组进入他的手部，而对于对手来说，动画是从他的牌组进入到他的手部。

我试过使用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>

有可能根据之前的位置来制作卡片的动画吗？就像一张牌在牌组中，然后它移到手上，就会运行特定的动画。从手到甲板也是如此。谢谢

用这么少的代码很难诊断出这一点，但我猜类似的事情正在发生：

玩家A抽一张牌：

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

如果这是动画时间变化的原因，则解决方案是防止播放器A的浏览器模拟触发动画的数据库更新。换句话说，第一台了解抽卡的机器应该是服务器，它可以大致同时将消息同步到两名玩家。有两种方法可以实现这一点：

  1. 在绘图时更新数据库的功能中使用this.isSumulation。基本上，将数据库更新代码保存在类似if (!this.isSimulation)的块中，以便它只在服务器上执行
  2. 通过Meteor方法绘制卡片。所以玩家A会抽一张牌，这会导致Meteor.call("drawCard")，然后drawCard方法会在服务器上执行。（userId在this内一起发送）。在/server文件夹或Meteor.isServer块中的文件中定义drawCard方法，这样客户端就看不到它的代码，这意味着他们无法模拟它

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

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

相关文章：