背景

---

   产品张是一名工地勤勤恳恳的“搬砖工人”， 他最大的爱好就是掰掰手指头，数数自己微末的工钱，算算下一个节假日是什么时候。

   十指计算有点麻烦，产品张想要那种能自动计算的，方便查看的。于是，他想到了自己的小伙伴 - 技术张，会写点代码的同（铲）车搬砖人。产品张通过自己的三寸不烂之舌，晓之以理，动之以情，最终，以每天2个烧饼的工程造价，“收买”了技术张。

开始

TO张接下需求

   我是技术张，一名混迹于工地，叱咤车间的风云人物，最近，我承包了我产品张兄弟的一个小项目，那不是手到擒来，每天还可以多吃两个烧饼，这一波血赚。

   经过商量，我们决定在微信小程序上落地我们的项目。产品张的需求只有“一句话”，所以我可以也只能自由发挥。我在纸上一顿 上上下下左右左右BABA , 洋洋洒洒的绘制出了项目的施工图，“我辈子怕不是吴圣转世吧！”。（图如下）

   大体上能满足产品张的需求，还多给他多了“点餐”，“晚上娱乐”两个功能，产品张老是纠结吃饭选什么。我技术张不愧为助人为乐的良师益友。

   我拿着图纸找到的产品张，产品张看完后惊为天人，拍了拍我的肩膀说：“兄弟，真有你的！”，并预付了我三天的烧饼。吃着烧饼，我顿感力量惊人，突破超凡，开始了我的施工。就这样，开启了白天推推小车，晚上敲敲键盘的平凡生活。

   我在网上爬了今年的万年历数据，并以此来计算节假期，再以定时器来计算每天的工钱。在2月14日这天，望着窗外来来的男男女女，我完成了首页的绘制。

   第二天，我找到了产品张，让他看了现在的成果，产品张很满意，勾着我的脖子说着自己以后成为大富翁的场景，并告诉我，他希望点餐页面能结合 Yu-Gi-Oh! （游戏王） 风格。望着他那45度的嘴角，我真想以我1千克的脚，踹向他37°的屁股，但望着我手中2块钱的烧饼，我3声哈哈哈。

PD张提出Yu-Gi-Oh分格

   代码第一步，先是设计图，发动魔法卡“吴道子附体”，又到了展示我代码张鬼佛神功的画技时刻。

只能说和卡牌有亿点点像吧！！！设计完卡牌后，我考虑如何绘制点餐的动作，本打算是模拟抽卡，召唤怪兽的画面，但苦于技术火候不到家，只能考虑以一个简单的动画展示。 在抽卡的方式上考虑了两种，一是从卡组里抽取，二是从转盘里抽取，所以我又设计了个大转盘。

最终，结合了两个，采取了下面的流程

1. 点击卡组抽牌
2. 转盘开始转动
3. 转盘动画结束，卡片出现
4. 卡片动画启动
5. 显示抽中的卡片。

卡牌的出现动画通过旋转，缩放简单了实现下。

@keyframes foodRotateAni {
  0% {
    transform: scale(0.1) translate(-500%, -700%) rotateY(0);
  }
  20% {
    transform: scale(0.25) translate(-10%, -20%) rotateY(360deg);
  }
  40% {
    transform: scale(0.5) translate(-20%, -30%) rotateY(1080deg);
  }
  60% {
    transform: scale(1.2) translate(-30%, -40%) rotateY(1440deg);
  }
  80% {
    transform: scale(0.5) translate(-40%, -50%) rotateY(1800deg);
  }
  100% {
    transform: scale(1) translate(-50%, -60%) rotateY(2160deg);
  }
}

至于抽中的是那张卡片，则是在卡牌库中通过加权随机算法得出结果，最后，双六爷（游戏王里的人物）会展示出结果。（效果图如下）

背景是海马和Blue-Eyes White Dragon，完美契合主题！因为日夜的工作，日渐虚弱，再加上甲流盛行，不幸病倒。另一个功能（晚上娱乐），只能延期。将以上完成的部分交付产品张验收。

   我是产品张，1月31日晚，我吃着烧饼来到了产品张的屋外，看到窗户里的他正在奋笔疾键，我没有敲门。

   2月8日晚，在屋外驻扎了会，窗内正是技术张挠头发的画面。

   2月14日晚，我和女朋友吃完夜宵回来，路过技术张的屋外，听到了他的笑声，我偷偷摸摸，蹲着摸向窗户，以为能看到什么刺激画面，没想到是他对着电脑傻笑，完了完了，这兄弟沙雕了。

   第二天技术张提交了他的成品。我小小的把玩了一下，虽然画质粗糙，但该有的功能都有。即使还有未完成的，但是看他抹鼻涕的样子还是不忍喷他，说道：“技术张啊，做得不错，虽然有点简陋，扔瑕不掩瑜啊！”。然后，我支付了90%的尾款 - 18个烧饼。 技术张接过一袋饼子，数了数问道： “咋少了俩个？”，我答道： “兄嘚，你这漏点功能，少了2张也不过分吧！”，技术张回道，“我都这样了，你还克扣”。在一顿争辩后，我又补了一个给他。

新的风暴

   在忙碌的一段时间过后，产品张，辗转多个工地，干活卖力，赚了不少钞票，看中小程序上日益跳动的数字，发出了“gei gei gei”的声音。

PD张新的脑洞

   我是产品张，最近我赚了点小钱，昨天还吃上了10寸大烧饼，生活小滋小润，上了小台阶。所以我也打算给小程序UP, UP。牺牲了一晚睡眠时间，一顿头脑风暴后我梳理出了我的idea。（如下）

望着桌面上的这份xmind, 我不禁自诩悲鸿转世，赛过百变怪。好东西当然要和小伙伴分享，我得想想这次需要多少烧饼，10张会不会太多了啊，那我吃亏点，给他8张好了，嗨呀，善良如我！

TO张光荣完成

   我是技术张，今天可恶的产品张又来找我了，上次给他打工太亏了，这次怎么也不答应他。他给我看了他的新想法，几日不见，他还用上了xmind，还标出了优先级，真是刮目相看。产品张说他这次愿意出每日4个烧饼，较上次翻倍，希望我帮他升级升级，我回道：“产品张啊，小弟我最近偶感风寒，体力不支，恐怕不能帮你啊”， 产品张面露难色，眉头紧锁，思索了一番，正准备说话，我立即抢道：“得加饼，8个”。 产品张顿时哑住，说道：“兄弟家也没有余粮啊，都要吃不起了，要不6张”。

   “至少7张”，我回道。

   “要不7.5”，产品张说。

   我立即抓住他的手， “成交”。

   晚上我回到出租屋，打开我的微信开发者工具，思考着如何Upgrade My Program。 一时没想到好主意，于是我准备先化身画图攻城狮，绘制下一亩三分地。这次总共新增了6个页面，我先绘制了 首页，我的，个人信息（打工人），万年历页面的大致样式(下面展示两图)。 另外两个页面则比较固定，会参照已有的组件。

       

   敲定了工程图后，白天搬土砖，晚上敲码砖，吃下烧饼，超越战神。一段时间后，我完成了四个页面的基本绘制。在首页上，我又“突发抽风”添加了3D变化和阴影效果，在用户设置完页面或进入页面时有一个明显的“翘”起卡片的效果。

.date-item-shadow {
  box-shadow: 0px -16px 10px 0px rgba(0,0,0,0.5);
  perspective: 200px;
  transform: rotateX(12deg);
}

结果导致了我底部切换日期的组件和卡片出现了相互重叠的问题（如下图）。

这问题难住了我好几天，不管是设置绝对定位，z-index, 还是使用root-portal 等等都没有效果，而且排查出来，正是上面的样式引起的，经过几夜辗转反侧，终于我想到了“用魔法打败魔法”，我把遮罩层也进行3D变化，用 translateZ 把它抬的高高的。

   至于假补页和假补图表页，我分别使用了vant的日历组件和echart的小程序版本。 因为图表比较长，所以图表页面我还设置了 "pageOrientation": "landscape" 用于横屏展示。

   至此，所有的页面我大都完成了，天才如我，不过美其名曰优化优化，我还要多吃几天产品张的烧饼。三天后，我向产品张交付的我的成果。

   我是产品张，看到了技术张新的成果，我觉得还是稍稍可以的（除了动画稍稍拉跨，颜色稍稍糊涂），这次就大发慈悲，不克扣他的烧饼了。我可真是个好人。

   此时，远处的技术张正吃着烧饼，边吃边笑，还说道：“产品张这个二愣子，这次让我赚了吧”。

---

故事纯属虚构，如有雷同，纯属巧合！

产品张和技术张和大家一起分享成品。让学习，工作，生活更有动力，更有滋味！

感兴趣的小伙伴可以到 Github一游

Fighting!