星秀猫2.0 - 2021年618互动技术大揭秘
摘要：今年 618 互动，星秀猫 IP 卷土重来，开启星级厨师养成计划。本文主要从动效技术方案、当面摇一摇玩法和端上智能探索 3 个方面，全方位揭秘其背后的淘系互动前端技术体系演进的创新点。
前言
又是一年 618 电商大促，今年淘系互动团队沿用了去年双11“超级星秀猫” IP，并开启全新的星级厨师养成世界观。今年 618 互动，在保留主线成长玩法的同时，用组队打 boss 的佛性挂机模式取代了紧张刺激的 PK，并创新性地引入了近场社交机制，让广大消费者可以在享受趣味养猫基础上、与好友一起更轻松地赢取大促福利红包。而这一切的背后，是业务多变性、产品稳定性和研发效能的多重博弈，这篇文章主要从动效技术方案、当面摇一摇玩法和端上智能探索 3 个方面，来具体阐述淘系互动前端团队的技术方案演进与创新。
2021年618互动 - 星厨养成记
动效背后的技术
在互联网电商领域，互动是通过游戏化等形式满足用户内在需求而进一步取得用户增长的一类业务模式，动效则是游戏化的重要表现形式之一。如下视频所示，今年 618 互动，动效部分相较以往更多更复杂，除玩法主形象数量从 1 个增加到 3 个外，还多了赚喵币、自生产、肥料收取等入口动效。很多人都纷纷来咨询小编这些动效是如何制作出来的，也很关心我们是如何做好稳定性保障的，接下来，我将结合这两个疑问来讲讲动效背后的技术。
2021年618互动 - 动效
动效的制作
今年 618 互动的动效可以大致划分为两类，星秀猫主形象和入口引导动效。
在项目开始之前，我们就开始沟通整体的技术选型和美术创作工具，也就是创作选型，我们沟通了几种动效选型。一种是帧动画，以逐帧的方式来播放动画；第二种是骨骼动画，基于一套基础的骨架，来播放动画；然后是 Lottie 动画，设计师可以通过 Adobe After Effects（以下简称 AE） 设计动画然后通过插件导出即可渲染出动效。
动效选型
由于骨骼动画天然适合这类有一个主体形象的动画，我们选择了2D 骨骼动画 Spine 来制作星秀猫主形象，通过网格自由变形和蒙皮技术在视觉上呈现“3D轴”的偏转。正是在 Spine 强大动画创作的支持下，星秀猫才有了“3D化”的动画化表现力。
动效制作 - 星秀猫主形象，Spine
动效制作 - 入口引导动效，Lottie
稳定性保障
互动场景中存在大量动效、视频，而过高的内存占用可能会引发客户端 crash 影响业务结果。一边是客户端需要更炫酷的玩法去支撑业务发展，一边是一些设备性能较差的用户反馈卡顿，如何在保障用户效果的同时让更多的设备体验更加高清、流畅的互动呢？
比起不顾一切地上动效或是一刀切的砍玩法，显然存在一个更合理的选项--体验分级，即根据设备评分来分级展示。会有一个过滤器，分别支持系统版本、APP 版本、设备、内存、品牌、设备得分、GPU 得分等维度，其中跟互动最强相关的就是内存、帧率和 GPU 3 个指标。然后，我们会基于这套底层过滤器的配置，根据最终得分抽象出高、中、低 3 个维度的动效等级，比如高评分的会表达全部动画效果、中评分的会表达关键动画效果、低评分的会降级所有动画效果。这里，不同业务的底层过滤器的数值也会有一些微调。
动效 - 基于体验分级的稳定性保障方案
正是这套稳定性机制，让 618 互动在极大程度做到了高清互动、符合了架构组验收标准而且在线 21 天全程 0 故障。
当面摇一摇合伙玩法
今年 618，如下图所示，在养成、做任务、得红包的主链路外，还增加了合伙经营玩法，通过游戏化玩法包装分享任务，引入更具氛围感和动感的交互方式--摇一摇。
2021年618互动 - 当面摇一摇合伙玩法
那么，我们是如何实现当面摇一摇合伙的呢？
首先是匹配链路，当面摇一摇这个需求可以拆解成当面和摇一摇这两个子功能点。摇一摇不难思考，基于客户端摇动监听的 hybrid API 即可实现，难点是如何实现【当面】，核心考量匹配用户位置的精准度。
常见的精准匹配方案如下：方案一，也是最粗糙的，在用户摇一摇的时候，根据定位和时间来匹配 方案二，精度比较高的，使用蓝牙广播，用户摇一摇的时候把信息广播出去、在接收到的时候进行配对 方案三，精度最好，但是对设备要求更高，使用 NFC 近场通信，摇一摇的时候把 NFC 信息广播出去，再进行匹配
经过一番调研，考虑到客户端当前仅支持获取用户当前经纬度的 hybrid API ，我们只能采用方案一。那么，如何通过经纬度计算出两个用户的距离呢？这个时候，你需要了解下 GeoHash 算法 -- GeoHash 是一种地址编码方法，他能够把二维的空间经纬度数据编码成一个字符串，其前缀可以表示更大的区域，例如 wx4g0ec1，它的前缀 wx4g0e 表示包含编码wx4g0ec1在内的更大范围，我们可以通过比较两个地理位置经过 GeoHash 处理后匹配的位数来判断两个点之间的最大距离。因此，如下图所示，当面摇一摇这个玩法的匹配需求就具象成了：当用户 A 摇一摇手机，然后展示附近 m 米、时间 n 秒内一块摇一摇的用户 B。
当面摇一摇合伙匹配链路需求拆解
接下来是合伙，也就是组队链路。相较于匹配链路，组队链路就比较简单，重点在于做好针对各种组合策略的正常和异常处理。
顾名思义，合伙是一个双向奔赴的过程。当用户 A 摇一摇匹配到用户 B 时，此时 A 和 B 都会展示一个有倒计时的确认页面，两个人都可以提交自己的组队意见，即愿不愿意和对面那个人组队，只有在倒计时结束前两个人都同意才算是完成一次组队。如果 1 个人同意、1 个人拒绝 / 1 个人同意， 1 个人一直不说话 / 两个人都拒绝 / 1 个人拒绝、1 个人一直不说话 / 两个人都一直不说话，都算是组队失败。
当面摇一摇合伙组队策略
而组队的异常，这里特别指超时逻辑的处理。提到超时，不难想到是用 setTimeout 或 setInterval 这 2 个 API 来实现，也就不得不提到一个浏览器优化的坑，即：因为浏览器的优化，当浏览器窗口处于非激活状态下（最小化或者切换到其他 Tab 页）时 setTimeout 和 setInterval会停止工作或者以极慢的速度工作，称之为“休眠”，出于节能考虑，setInterval(fn, 0) 将被推迟为类似 setInterval(fn, 1000)。基于这个考虑，用到倒计时的场景一定要考虑切后台情况，也就是需要特殊处理 页面可见性状态改变事件。
总的来说，摇一摇合伙机制，作为分享玩法的优化，在降低近场社交操作门槛的同时，也弱化了拉人做任务的打工感。这个玩法上线后为主互动每日带来近一半的互动新用户，日均参与用户使用数十次，带给业务新的近场社交模式，为未来做好技术储备。
端上智能的探索
随着机器学习和人工智能渗入到各行各业，随着你画我猜、智能推荐、以图搜图、尬舞……渗入生活的方方面面，越来越多的研发同学看到了 AI 的力量，希望借助算法能力提升自己域内的交付效能，前端智能化就是其中一个比较热门的方向，大家熟知的淘系 F(x) Team 就是其中的佼佼者。而电商互动领域，由于其游戏化属性带来的交互复杂性，玩法链路一直是强产品意志体现的，不少智能化提效方案在互动领域的落地举步维艰。所以，智能化这个手段就注定与电商互动玩法交付提效无缘了吗？
回到互动业务本身，正是由于其游戏化属性本身，用户在互动页面上常常有一系列的操作行为。不同于传统会场的单一点击跳转行为，互动页面上行为数量与玩法本身产品方案中设计的功能点数量正相关，以今年 618 互动为例，下图是用户在单人玩法页面上可进行的操作行为。用户行为往往体现了消费者本身的意志，记录下来的用户行为链路数据，天然具有实时特性，不仅可以用于判断当前产品链路合理性，还可以对当前产品链路进行额外补充，未来结合算法，还可以用于预测用户动向、衡量用户价值，真正实现互动领域的千人千面。
2021年618互动 - 单人页面用户操作行为示意
在这个思考下，今年 618，淘系互动前端团队在产品方案基础上，进行了基于端上用户行为的智能引导方案的初步尝试，大致链路如下图所示。
2021年618互动 - 端上智能探索落地链路
与传统的后端智能化方案相比，端上智能方案将整个策略引擎分为用户侧端上引擎和投放侧策略中心，端上引擎和策略中心之间通过消息通道进行通信。端上引擎是完全去中心化部署的，这一点与游戏非常类似，TA 直接在客户端上动态执行规则匹配、钩子执行等操作。同时，端上引擎还会实时地采集用户在互动页面上的交互行为，结合用户在端侧的上下文以及条件规则，可以制定出非常丰富的策略。策略中心则会通过消息通道，向端侧下发当前场景的策略（即上文中的规则+钩子），同时也接收端侧传回来的实时用户行为链，利用人工智能算法和人群标签等对用户的意图进行分析。另外，策略中心还负责了对每一个策略的效果统计和实验，帮助业务发现更有效的策略，从而提升业务效果。这次 618，实现了核心的策略定义、策略场景化配置&下发、行为采集、策略规则匹配&钩子执行以及行为上报功能，主要承接了各种引导类需求，特别是其动态化能力封装，在上线后变更响应部分收获业务方无限好评。
未来，希望通过系统化的方案完善互动端上智能方案，实现动态拼装和下发互动业务逻辑，逐步覆盖新手引导、支线任务、主线逻辑等业务场景，进一步地，结合算法能力，真正实现互动领域的千人千面。
结语
最后，618 虽然已经结束，但更大规模的双11全球狂欢节马上就要启动。高复杂度、大规模的营销活动业务场景将持续推动着淘系前端技术体系朝着极致方向迭代演进，淘系互动团队将持续完善 EVA 体系，通过不同的技术方案不断地优化我们的开发方式、提升研发效能，期待更多的同学加入阿里淘系互动前端团队，一起来创造618、双11的新历史，此时此刻，非你莫属！简历投递：taicheng.htc@alibaba-inc.com。
了解更多，钉钉扫码进群 ⬇️
往期推荐