PROS的不妙冒险（八） 实现《炉石传说》中的手牌动态布局效果

今天，我们来一起学习一个简单的动态布局案例。

笔者玩过许许多多的卡牌游戏，像是《三国杀》、《斗地主》、《万智牌》、《巫师之昆特牌》等等。尽管它们的机制大不相同，可要说到游戏的手感，还是能分出个高下的。笔者认为，《炉石传说》在所有卡牌游戏中，手感可以说是数一数二的了。无论是大致预览手牌，还是仔细读每张牌面，信息都是那么一目了然；无论是鼠标扫过每张手牌，还是悬停拖拽某张手牌，动画都是那么丝滑流畅。我十分在乎游戏的手感，但它不是今天要讲的重点内容。

什么是布局？

一般情况下炉石传说，我们要应对玩家手牌数目的变化，就需要想一个能够合理利用屏幕空间的手牌布局方案。例如《斗地主》的直线排开： 《万智牌》的开扇： 这两种手牌布局方案都颇为常见。

什么是动态布局？

《炉石传说》综合了这两种布局方案，并根据一定条件来回切换。在玩家手牌较少时应用直线排开： 手牌较多时应用开扇： 这就是一个最最简单的动态布局的例子。我们试着实现一下炉石的手牌布局吧！

之一步：按照逻辑设计代码模块

除非你对将要写的功能十分熟悉，否则更好是先进行系统的设计后再写。与其越写结构越松散，毛病越多，还不如养成提前计划的好习惯。这里我们先不急着实现某一模块，而是先列好“大纲”：欲改变手牌的位置与旋转，就肯定要拿到手牌的组件；想要知道在两种布局下各张手牌的位置与旋转，就要有专门的函数与计算它们；能够触发手牌布局切换，以及手牌位置旋转变更的，就是手牌数目的变化了，所以要对外留出接口。经过一番设计，我们写出了上图的“空壳子”。

第二步：实现直线布局

在上面的演示中不难看出，炉石手牌的直线布局就是一张挨着一张，颇为简单，不再赘述。 然后在每次手牌数目变化时重新计算手牌位置，并给手牌添加位移的过渡动画： 然后随意写一个测试用的“发牌员”，看看效果是否如预期：

第三步：实现扇形布局

扇形布局的原理有些复杂，我们需要取一个圆上某个区间的一段弧，并将手牌均匀地放在这段弧线上。 稍作简单修改，再来看看扇形布局的效果是否满意：

第四步：实现动态布局

虽然有了这两种布局的实现，但它们单一作用时似乎都不太妥当。直线布局间隙适中，可在手牌数目多的时候会超出屏幕；扇形布局限制了宽度，但手牌数目少的时候间隙过大不够美观。我们需要在合适的时机来切换布局方式，来尽可能适配所有情况。在代码中新增()方法来完成这个功能： 我们来看看最终的效果：

其实动态布局在生活中随处可见，只是它们因司空见惯而不易发觉。

例如惊艳的瀑布流“”： 还有移动端经典的“Flex”布局：

OK~以上就是本期的全部内容啦！如果您受到了启发，或是需要完整的源码进行学习，也请您点赞+收藏支持我！我们下期见~