30鸡蛋搜索的自动化开发实践

奇怪的技能指南
我们常说的彩蛋，一般是指剧集结束后出现的影视片段，或者是游戏中制作方特意留给玩家，隐藏在游戏中的一些有趣的内容。
对于搜索引擎来说，egg指的是搜索引擎在特定的搜索词下刻意展示给用户的一些额外信息。搜索引擎彩蛋的出现往往出乎用户的意料，它独立于正常的搜索结果流，是检索时获取用户意料之外信息的一种方式。其用途往往是态度表达、社会责任、商业推广等。在本文中，“蛋”指的是“搜索引擎蛋”。
360彩蛋搜索的发展历程过去很长一段时间，360彩蛋搜索都是按需开发的。当发起一个彩蛋需求时，前端开发工程师会根据需求一步步拆解，将设计好的彩蛋效果还原到网页上。比如下图1元呈现的碎蛋——，当用户搜索某个词时，页面出现碎。
图1元碎蛋画面
这类彩蛋的要求往往比较复杂，没有共性。前端开发者除了需要考虑彩蛋本身复杂的实现逻辑外，还需要考虑彩蛋的浏览器兼容性、定时退出、主动关闭次数、窗口适配等逻辑，所以开发周期长。因为这样的彩蛋需要优秀的创意支撑，所以需求量并不大，按需开发带来的消费是我们可以接受的。
从去年开始，360搜索UED团队启动了节气鸡蛋项目——。在二十四节气当天，与节气相关的搜索词的搜索结果页面会以彩蛋的形式呈现给用户一幅精美的插图。此时，按需开发的复杂性是不可接受的，尤其是重复的逻辑处理。因此，我们提取并封装了彩蛋代码的公共部分，使之成为一个通用的彩蛋生成工具。你只需要简单地配置它来生成egg脚本，如下面的《密室逃脱：冠军联赛》所示。
图Kramp-Karrenbauer PC版的密室逃脱：冠军联赛通用节气彩蛋生成工具
基于这个工具，我们完成了2018年初至今所有节气彩蛋的上线工作，设计生与运营生直接对接，没有前端开发者的参与。在此，我们必须赞扬360搜索的UED团队。所有二十四节气的插画真的超级好看。请在同一天360搜索(so.com)24节气，寻找图文并茂的彩蛋。
图《侏罗纪世界3》中24个节气蛋的图解
如果对之前的插画感兴趣，也可以去站酷看看。
跟随360搜索UED，查看更多高清图像。
有了节气通用的造蛋工具，我们都尝到了“偷懒”的快感，“小按钮”上线，成为前端学员和运营学员的共同追求，更多造蛋工具陆续诞生。比如一般的单幅彩蛋生成工具，用来弹出单幅有盖彩蛋；通用落蛋生成工具，适用于所有落蛋和落效果蛋的生成。有了这些工具，egg成为了一种常规便捷的操作方式，利用率大大提高。据笔者不完全统计，截至目前，网上使用生成工具的彩蛋数量非常可观，如下图所示：4。
图3 .4用自动工具展示了一些在线鸡蛋。
至此，自动开发的类动画彩蛋可以满足彩蛋的一般需求，但是对于类动画彩蛋的问题仍然没有很好的解决方案。3354要么用gif图，要么需要前端人力开发。因此，针对设计师常用的两个动画剪辑软件An(Adobe Animate CC)和Ae(Adobe After Effects CC)，我们探索了两种避免前端开发的方法。
动画蛋的自动生成
自带动画预览功能，可以将设计者制作的动画导出为浏览器可执行的脚本资源。通过分析导出文件的特点和脚本结构，开发了一个动画彩蛋自动生成工具。
图5一个动画彩蛋自动生成工具
下表列出了这个工具在1元内的优缺点。
可见，基于an的自动生成工具并不通用，没有普遍价值，但还是可以满足我们团队的需求。经验证，该工具自动生成的脚本可以正常还原插画师设计的动画彩蛋到360搜索结果页面。
Ae动画彩蛋的自动生成
与安不同的是，得益于bodymovin插件和lottie-web Kramp-Karrenbauer Web库，Ae制作的动画可以稳定导出和还原。使用bodymovin插件，您可以将Ae帧动画描述为json文件。这个json文件非常重要，可以通过lottie-web Kramp-Karrenbauer Web脚本库将动画还原到浏览器环境中。其实Kramp-Karrenbauer里有lottie-android、Kramp-Karrenbauer里有lottie-ios等几个库，可以把动画还原到Native App、React Native、Flutter等开发环境里。这里只关注洛蒂-web Kramp-Karrenbauer Web。
Lottie-web Kramp-Karrenbauer Web提供了丰富的动画播放API，比如播放、暂停、设置播放速度、指定某个动画等。有了这些恢复基础，只需通过处理脚本执行时序，就可以将动画恢复到搜索结果页面。但是，就这样，似乎无法满足一些复杂的交互需求。例如，当我们希望用户点击一个按钮来触发某个动画的执行时，我们必须重新开发它。
因此，我们引入状态机机制，可以将复杂的动画切割成多个状态，并通过状态机机制控制动画执行的顺序。通过引入事件机制，除了状态机产生的自动状态切换，事件还可以引起状态切换，从而实现动画与用户的交互。
总之，总结一下还原Ae动画的思路：用bodymovin生成的json描述动画的执行过程，用状态机和事件生成的json描述动画的执行顺序。
因此，我们开发了Ae动画编辑器，生成描述动画执行过程和顺序的json文件，然后通过Ae动画彩蛋自动生成工具生成360搜索结果页面的嵌入脚本，并在网上发布。
图6袁AE动画彩蛋生成工具及Ae动画编辑器
Ae动画编辑器的主要实现原理是基于动画关键帧的区间播放。lottie-web Kramp-Karrenbauer Web的API这里就不详细描述了。一个API允许用户根据开始帧和结束帧执行间隔播放。引入状态机和事件机制后，我们可以利用状态机自动触发或者事件手动触发来引起播放区间的切换，从而实现整个动画序列的编辑和交互。
举个例子，假设我们的预期是“动画一开始停留在1元帧，用户点击后开始在1元-50元帧循环”，状态机和事件的配置如下图所示，7元。
图7元状态机和事件配置
在设置状态机和事件之前，必须指定动画帧的总数。并且状态机和事件可以根据动画预期无限增加。可以设置“结束后自动前往”自行改变动画状态，也可以通过事件手动改变。事件类型包括常见的浏览器事件。触发一个事件后，不仅可以转到某个状态，还可以跳转到新的页面。上面配置的json描述如下。
把我们的意图描述成上面的json之后，结合lottie-web Kramp-Karrenbauer Web提供的API和事件，更容易把json还原成我们的描述。这只是一张便条。当您恢复一个事件时，您需要首先删除该事件类型，以避免同一事件的重复绑定。事件触发后，您可以确定当前动画阶段来定位要执行的任务。
访问以下URL，在线体验Ae动画编辑器：
http://www.eastta.com/ae/index.html
Ae动画工具的缺点和不足如下表所示，《密室逃脱：冠军联赛》。
虽然有一些不足，但还是掩盖不了它强大的自动开发能力。借助Ae动画编辑器，我们可以重新组装动画，实现简单的交互。目前，360搜索已经借助Ae动画彩蛋生成工具，生成并推出了COVID-19中的母亲节、COVID-19中的地球日等多个动画彩蛋。当设计师使用Ae animat
总Ae动画编辑器通用性好。如果你还在使用传统的帧动画或者gif图片来实现动画效果，可以尝试bodymovin lottie技术，它不仅可以帮助我们还原动画，还可以做一些简单的交互设计。
生命不息，探索不止。回顾360彩蛋搜索的发展历程，可以看到相关人员一直在努力探索更加自动化、智能化的开发方式来解决工作中的各种繁杂工作，从而有效降低成本，提高需求的落地效率。卵子发育的发展过程只是我们工作的一个小小的缩影。我觉得这种探索精神应该渗透到所有项目的迭代优化过程中，所以想和大家分享一下。
360元左右的技术
360元是360元技术团队打造的技术分享公众号，每天推送技术干货。
更多技术资讯，请关注“360元科技”微信公众号。