360搜索彩蛋自動化開發實踐

本文首發於360技術公眾號，360搜索彩蛋自動化開發實踐。

引子

　　我們常說的彩蛋，一般是指影視劇在劇情結束之後出現的影視片段，或者是游戲中製作者特意為玩 家留下的、隱藏在游戲中的一些有趣的內容。對於搜索引擎來說，彩蛋是指搜索引擎在特定的檢索 詞下，刻意為用戶展示的一些額外信息。搜索引擎彩蛋的出現往往在用戶的預期之外，其獨立於正 常的搜索結果流，是用戶在檢索時預期之外的信息獲取方式，用途常為態度表示、社會責任、商業 推廣等。在本文中，“彩蛋”特指“搜索引擎彩蛋”。

發展歷程

　　在以往很長的一段時間內，360搜索彩蛋的開發方式為按需開發。當發起一個彩蛋需求後，前端開發工程師會按照需求逐步拆解，將設計出的彩蛋效果還原到網頁中。比如下圖1呈現的碎屏彩蛋——當用戶搜索某個詞時，頁面呈現出碎裂效果。

 圖1 碎屏彩蛋

　　像這類彩蛋需求往往都比較複雜，並且無共通性，前端開發人員除了需要處理彩蛋本身複雜的實現邏輯外，還需要考慮彩蛋的瀏覽器相容性、定時退出、主動關閉次數、視窗自適應等邏輯，開發周期較久。由於此類彩蛋需要優秀的創意支撐，因此需求量並不大，按需開發帶來的消耗我們還可以接受。

　　從去年開始，360搜索UED團隊發起了節氣彩蛋計劃——24節氣當天，與該節氣相關的搜索詞的搜索結果頁面都會將一副優美的插畫作為彩蛋呈現給用戶。此時按需開發的複雜性便無法接受了，尤其是重覆的邏輯處理。因此，我們將彩蛋的公用部分代碼提取封裝後，製作成通用節氣彩蛋生成工具，只需要簡單配置一下即可生成彩蛋腳本，見下圖2。

圖2 通用節氣彩蛋生成工具 - PC版

　　基於這個工具，我們完成了2018年初至今全部的節氣彩蛋上線工作，設計同學與運營同學直接對接，無需前端開發人員參與。

　　這裡必須盛贊一下360搜索UED團隊，24節氣插畫真的全部都超級好看，敬請大家在24節氣當天來360搜索(so.com)找插畫彩蛋喲。如果對往期插畫感興趣也可以去站酷關註360搜索UED，查看更多高清大圖。

圖3 24節氣彩蛋插畫

　　有了通用節氣彩蛋生成工具後，我們都嘗到了“偷懶”的樂趣，“點點按鈕”就發佈上線，成為了前端同學和運營同學的共同追求，更多的彩蛋生成工具先後誕生了。如通用單圖彩蛋生成工具，服務於彈出單張圖片蒙層類型的彩蛋；通用飄落彩蛋生成工具，適用於一切飄落、掉落類效果彩蛋的生成。有了這些生成工具之後，彩蛋成為了一種常規且便捷的運營手段，使用率大大提升。據作者的不完全統計，截止目前使用生成工具上線的彩蛋數量非常可觀，見下圖4。

圖4 部分使用自動工具上線的彩蛋

動畫類彩蛋的自動化開發

　　到這裡，一般的彩蛋需求都可以很好地被滿足了，但具有動畫效果的彩蛋仍然沒有很好的解決辦法——要麼使用gif圖，要麼則需要占用前端人力進行開發。於是，針對An(Adobe Animate CC) 和 Ae(Adobe After Effects CC)兩個設計師常用的動畫編輯軟體，我們探索了兩種方式來避免前端開發工作。

An動畫彩蛋自動生成

　　An自帶了動畫預覽功能，可以將設計師製作好的動畫導出為瀏覽器可執行的腳本資源。我們通過分析An導出後文件的特點和腳本結構，開發了An動畫彩蛋自動生成工具。

圖5 An動畫彩蛋自動生成工具

　　下表1列舉出了此工具的優點和不足。

表1 An動畫彩蛋自動生成工具的優缺點

　　可以看出基於An的自動生成工具通用性不高，不具備普適價值，但仍然可以很好的滿足我們團隊部的使用需求。經過驗證，藉助此工具自動生成的腳本可以正常地將插畫師設計出的動效彩蛋還原至360搜索結果頁。

Ae動畫彩蛋自動生成

　　與An不同，得力於bodymovin插件和lottie-web庫，Ae製作的動畫可以被穩定地導出和還原。使用bodymovin插件，可以將Ae幀動畫描述為一個json文件。這個json文件至關重要，通過lottie-web腳本庫可以將動畫還原至瀏覽器環境中。事實上，還有lottie-android和lottie-ios等多個庫，可以將動畫還原到Native App、React Native、Flutter等開發環境中。在這裡，我們只關註一下lottie-web。 
　　lottie-web提供了豐富的動畫播放API，比如播放、暫停、設置播放速度、指定播放某段動畫等，有了這些還原基礎，只需要處理一下腳本執行時機，就可以把動畫還原到搜索結果頁中了。但僅僅如此似乎不能滿足複雜一些的交互需求，比如當我們希望用戶點擊某個按鈕來觸發某段動畫的執行時，就必須進行二次開發了。 
　　為此，我們引入狀態機機制，可以將複雜的動畫切割為多個狀態，通過狀態機機制來控制動畫執行的順序。引入事件機制，除了狀態機產生的自動狀態切換，事件也可以引起狀態切換，從而實現動畫與用戶之間的交互。

　　一句話概括Ae動畫的還原思路：使用bodymovin生成的json用來描述動畫的執行過程，使用狀態機和事件生成的json來描述動畫的執行順序。 

　　我們開發了Ae動畫編輯器，來生成描述動畫執行過程和執行順序的json文件，再通過Ae動畫彩蛋自動生成工具生成360搜索結果頁的內嵌腳本並完成發佈上線。

圖6 Ae動畫彩蛋生成工具和Ae動畫編輯器

　　Ae動畫編輯器的主要實現原理是基於動畫關鍵幀的區間播放。lottie-web的API這裡不再詳細說明，其中有一個API允許用戶依據起始幀和結尾幀進行區間播放。我們引入狀態機和事件機制後，就可以用狀態機自動觸發或通過事件手動觸發來引起播放區間的切換，從而實現整個動畫順序可編輯、可交互。 
　　舉個例子，假設我們的期望是“動畫在初始時停留在第1幀，直至用戶點擊後，開始在第1～50幀迴圈”，狀態機和事件的配置即如下圖7所示。

圖7 狀態機與事件配置

　　在設置狀態機和事件之前，必須先規定動畫的總幀數。狀態機和事件都可以根據動畫期望無限制的添加。可以設置“結束後自動前往”來自行改變動畫狀態，也可以通過事件來手動改變。事件類型包括常見的瀏覽器事件，觸發事件後除了前往某個狀態，還可以跳轉到新頁面等。 上面配置的json描述如下。

 1 "stage":[{
 2     "stage": 1,
 3     "frame_s": 1,
 4     "loop": false,
 5     "play": false,
 6     "isRange": false,
 7     "endToStage": null
 8 }, {
 9     "stage": 2,
10     "frame_s": [1, 50],
11     "loop": true,
12     "play": false,
13     "isRange": true,
14     "endToStage": null
15 }],
16 "event":[{
17     "onStage": 1,
18     "type": "click",
19     "toStage": 2,
20     "url": "",
21     "isBlank": false
22 }]

　　將我們的意願描述成上面的json後，結合lottie-web提供的API和事件，再將json還原成我們的描述就比較容易了。這裡只提一點註意事項，在還原事件時需要首先將事件類型去重，避免同一個事件重覆綁定，事件觸發後通過判斷當前動畫階段來定位需要執行的任務。 
　　訪問這個Demo，可以線上體驗Ae動畫編輯器，可以使用內置的示例進行隨意編輯和預覽。

　　Ae動畫生成工具的缺點和不足之處如下表2所示。

表2 Ae動畫彩蛋自動生成工具的優缺點

　　儘管有一些缺點，但仍無法掩蓋其得強大的自動化開發的能力。藉助Ae動畫編輯器，我們可以對動畫進行二次組裝，且可實現簡單的交互。目前，360搜索藉助Ae動畫彩蛋生成工具已經生成並上線瞭如2019母親節、2019世界地球日等多個動畫彩蛋。

　　設計師使用Ae動畫導出時，註意事項可以參考官方說明。

總結

　　Ae動畫編輯器具有很好的普適性，如果你還在使用傳統的幀動畫或者gif圖來實現動畫效果，可以嘗試一下bodymovin + lottie技術，不僅可以幫我們還原動畫，還可以做一些簡單的交互設計。 
　　生命不息，探索不止。通過回顧360搜索彩蛋開發方式的發展歷程，我們可以看到相關人員通過不斷努力地探索更加自動和智能的開發方式來解決工作中遇到的種種繁複的工作，從而有效降低成本，提高需求的落地效率。彩蛋開發方式的發展歷程只是你我在工作道路上的一個小小的縮影，我自認為這種探索精神應該滲透到一切項目的迭代優化過程中，因此特意分享一下。