作者|渚薰
出品|阿裡巴巴新零售淘系技術部
作者簡介：淘系技術部-互動-渚薰。12年加入阿裡，曾先後參與和擔任手淘無線基礎架構工作、WEEX 前端架構工作。16年來到淘系互動團隊，帶領一群志同道合的兄弟姐妹們在互動業務領域探索技術價值、助力業務成長。
在人口紅利開始萎縮，各個 App 都開始以娛樂化互動作為重要手段來争奪普通群眾的線上時長。是以在諸如互動業務領域内，我們就需要打造核心輕量化、研發速度快、使用者體驗好的互動技術。它是 Web 技術的一塊特定領域，它融合了圖形、渲染、動畫以及前端工程和軟體工程等知識。本文會把這些領域的知識有條理的梳理一遍呈現給大家。
解惑娛樂互動：認知場景，知道娛樂化互動的概念和意義。
為什麼要做娛樂化的互動
想必很多做業務的同學，已經聽過無數次産品同學把互動這個詞挂在嘴邊了。那麼為什麼一個在電商業務，需要把互動扯進來呢？我們來看看2020财年阿裡巴巴投資者大會上，一張非常有份量的 PPT ：
PPT 中，列舉了不少淘系内的大型互動産品，比如金币莊園、淘寶人生，以及疊貓貓和雙11戰隊等大促互動。這些互動無外乎是吸引使用者、持續“消耗”使用者時間的有效手段。
同時，這類互動也會通過金币、紅包、虛拟形象等利益或内容滲透到商業中，直接或間接的帶來 GMV 的增長。從戰略的角度來說“娛樂化互動産品矩陣、加速拉動使用者活躍度提升”，就意味着娛樂化的互動所帶來的價值是非常可觀的。
使用者面前的甜點
為什麼互動會如此吸引使用者，這要從使用者喜歡的三類事物說起：内容、社交和娛樂。
- 内容：比如直播、短視訊、資訊流、咨詢等是依靠内容本身來吸引使用者的。
- 社交：比如朋友圈、陌生人交友等是通過人與人之間産生聯系來吸引使用者的。
- 娛樂：比如影音、書籍、遊戲等是通過賦予各類知識、情感享受來吸引使用者的。
我們常常會發現，内容被社交化，比如抖音。又會發現娛樂被社交化，比如王者榮耀。很少會發現獨立某類事物的産品存在，都是融合了内容、社交和娛樂的綜合産物。
使用者是如何互動的
互動可以了解為一種行為，它把内容、社交這類事物的産生在人人之間、人與平台之間傳遞起來。比如這張圖：
使用者和使用者之間，使用者和平台之間想要得到這些事物，就需要“互動”。這種過程它可能持續很久，也可能是一瞬間的事情。娛樂化能讓這些過程變得更有趣味性，比如借助好玩的形式獲得平台發出的紅包，又比如用雙11戰隊互相PK的方式讓使用者間完成社交聊天
《知乎-如何看待2019雙11蓋樓挑戰？》。種種有趣的玩法和現象下，使用者樂于其中并最終獲得自己想要的事物，這就是我認為的娛樂化互動的意義。
是以總結下，互動并不是一種事物，娛樂化互動也并不是遊戲，它是一種有趣、好玩的獲得目标事物的過程。這個過程，用趣味的場景或玩法是非常有效的手段。
如何閱讀正文
說了這麼多，還隻是個引子。接下來的内容都是基于這幾年淘系互動團隊在互動技術上的沉澱和經驗闡述的。如果，你已經是一位資深的互動技術架構師，希望你能找到互動技術和業務的結合點，跨領域形成融合。如果，你是一位互動業務的前端，希望你能分析自身業務處于哪一個階段、哪一個層次，并更加助力你的業務。如果，你仍然是一位非互動業務的前端，希望你能拓展知識領域、儲備相關技能，迎接娛樂化浪潮。
解讀知識領域：勾勒互動技術的圖譜，跨領域拓展知識。本文接下來從前端開發者的視覺來科普互動領域的技術體系。
技術知識圖譜
要開發互動 H5，到底需要學習多少知識？網傳曾有怎麼一份
知識樹（出自 miloyip 的
Game Programmer）。這份知識樹從最基礎的知識到專業技能覆寫的非常全，但這肯定會“逼退”很多想要進入這個領域的前端。但我的目标是讓前端開發者能開發娛樂化的互動，而不是真正的開發一款遊戲，所有我就對這些知識進行了重新歸類整理。
第一，程式設計基本功是每位技術同學都需要掌握的，特别是計算機科學和軟體開發，和具體的技術棧或者專業知識領域不強相關。也就是說，這一項對于大多數前端同學來說，是必選項，難度可以給一顆星。
第二，實戰應用技巧是對一個專業領域開發模式的總結，有一些不同于其他領域的技巧、架構和思維。學習開發模式可以從學習該領域的一個架構開始，就像你在學習一個 MVVM 架構（React、Vue、Angular）一樣。業界這樣的架構或引擎有很多，比如大名鼎鼎的
Unity，以及 Web Game 中有着廣泛好評的
Phaser、
Egret Laya，以及阿裡已開源的 Hilo 和孵化中的 EVA 。是以在這一項上，對于前端同學來說，可以找準一款架構進行學習或深入研究，難度可以給一星半。
第三，數學/實體學是所有科學的基礎^-^。互動中的基礎科學，同樣包括了代數、幾何、力學、聲學、光學等等。這些知識在高中、大學的教學課本裡基本都會涉及到。掌握基本知識後可以大緻了解各種模型設計，深入研究後可以挖掘更加富有創意的模型。在這一項上，可能大家在畢業後會漸漸丢棄，重拾還是有點難度的，可以給二顆星。
第四，圖形學是渲染的底層技術，AI是某類玩法的核心要素。這些知識隻有當你準備去從事這方面的項目開發時，才會專門用到，又或者最初隻需了解一二即可。當然，它對于前端技術棧的同學來說，完全是一個從未涉足過的新領域，難度可以給到三顆星。
重構學習之路
經過分類歸納後，就可以梳理需要學習知識以及方式方法。
首先，如果覺得自己基本功還不行，就惡補它，做到能熟練掌握程式設計語言、資料結構、算法、容器特性，以及設計模式、靈活開發等軟體工程的基礎理論，當然也不能紙上談兵，得實際應用在日常開發中。然後，适時掌握一個或兩個你覺得最優秀的架構，在實際項目中使用它，并吃透它。這樣下來，你就是一名合格的互動業務前端開發者了。
假如編寫邏輯并不能滿足你悸動的心，那麼我們就繼續：回去翻翻高中大學課本，看看已經放下了許久的知識，當你能熟練掌握了大學課本之後，通過這些知識，就能幫助你去了解和認知技術名詞和代碼實作。然後再苦心鑽研GPU工作原理、圖形語言的精妙之處，或許你就能創作一些有趣的特效出來。
再然後，如果你的需求方希望你研發一款線上實時多人對戰的玩法，那麼你就硬着頭皮去看下AI機器人的專題，那麼就可以寫出一些看起來并不那麼笨的AI機器人出現在真實玩家中間。
最後，理想是當一名架構師的話，那請把上面的這些階段和知識都精通吧。
明确角色和職責
學習目标和結果産出，也和你想要擔任的角色和職責是相關聯。
假如你非常熱衷于投入到業務的研發中，那麼作為一名開發者，你的職責就是提供可持續疊代、低代碼研發的解決方案。
假如你對美有特殊的見解，希望創作神奇夢幻般的效果，那麼作為一名技術美術，你的職責就是提供輔助創作的藝術工具以及許多精美的預設素材。
假如你總是操着一份想要制定标準的心，那麼作為一名架構師，你的職責就是提供完備穩定的頂層設計和架構方案。
解剖互動技術：深入互動去了解架構，不要放過任何細節。
前文中有提到淘系團隊正在孵化的 EVA，名字聽上去挺耳熟，不過這個不重要，重要的是我會借 EVA 的架構為大家剖析下互動的部分技術方案，以便大家對互動應該做什麼技術有所認知。
從體系到架構
淘系業務很複雜，整個前端體系也非常龐大，但好在有統一的業務平台去支撐産品營運側的需求，以及有淘系大生态來保證工程、建構、容器、Web架構等。有了這些強大的靠背，對于互動技術來說，更多的關心互動域自身的研發平台和核心基礎。先看這張大圖：
挑其中兩個來分析下它們的架構設計、分别是：EVA JS，EVA Store。
EVA JS 設計模式
EVA JS 也就是互動架構，為了承載互動業務的輕量化引擎，基本采用了業界成熟的架構實作，擁有 ECS、Loader、場景等基礎能力，依賴 Hilo 渲染，并提供豐富的擴充插件。核心部分的系統分層大體是這樣的：
其中，ECS 是 EVA Core 中的核心，全名 Entity Component System，是一種設計模式，也是參考了遊戲領域的架構設計，和我們常見的 OOP+MVC 有着比較大的差異。
舉個生動的例子，在程式裡建立一個爬山者，賦予它體力的屬性和行走的能力，并且行走會消耗體力。在面向對象的設計模式下，程式設計方式就是通過對繼承和實作接口來完成的。
從子類到基類，需要逐漸抽象具體行為。那麼問題來了，因為繼承關系是一顆樹，當遇到某個具體對象（葉子節點）無法繼承某個基類（父節點）時，那麼就必須再創造一個基類（另一個父節點），并且尋找可以挂載的祖父節點。例如，我們通過對爬山者的抽象，創造了一個人的基類。人的基類繼承自渲染對象的基類下，此時如果要再實作一個爬山猴，那麼就又要創造一個動物的基類，同樣繼承自渲染對象的基類。
但它們兩者的很多行為都是一樣的，比如體力屬性、行走能力。這些行為雖然可以用接口的方式實作，但不免就顯得很繁瑣。因為，每設計一個類（增加了一個節點），就增加了維護一棵樹的成本（它總是會被繼承的）。那麼ECS又是怎麼做的呢？
在最初，爬山者就是一個空對象。當給這個空對象添加了一個渲染元件，并且提供了一張人的圖檔時，它就變成了一個人。接着添加一個行走元件，就變成了一個可以行走的人。最後添加一個體力元件，就變成了一個有體力的可行走的人。接下來，系統就開始登場了，當重力系統介入的時候，這個人開始消耗體力了；當動畫系統介入時，行走的人動起來了；當渲染系統介入時，目前行走的狀态就顯示在了螢幕上。這些系統在一個循環裡不斷運作，每一幀都在改變這些元件的資料和狀态。
那麼如何實作爬山猴呢？僅僅隻需要再建立一個空對象，添加這些元件，并賦予不同的參數值就可以了。
這個時候應該不難察覺，在一個場景裡實體是非常多的，比起維護繼承樹，維護能力元件的成本要低的多。這裡并不是在比較這兩種設計模式的優劣，而是诠釋在特定的場景下需要用合适的設計。ECS 不光擺脫了繼承樹的負擔，它還減少了資料通信的成本。
因 Game Loop 的存在，改變資料後每一幀讀取到的都是最新的資料，是以并不需要用單向綁定或事件機制來觸發的資料對視圖的重新整理。是以也就不需要 MVC 當中的 Controller，整個 ECS 可看成一個自運作自更新的 View，隻是資料存放在了 Component 裡，改變資料的Action存放在了 System 裡。
EVA Store設計模式
在互動中需要大量的素材，例如雪碧圖（Sprite）、雪碧圖動畫（SpriteAnimation）、骨骼動畫（SkeletalAnimation）等。
它們自然是交給引擎來讀取并展示的。但從原始資源到可被引擎讀取的素材之間，實際會需要一些預處理，比如對資源的檢測、對圖檔的壓縮、對資料的優化等。一些引擎會附帶一些工具來對原始資源進行預處理。EVA Store 一方面成為這類資源輸入和素材輸出的集散地，另一方面集合多種素材預處理工具，可以給視覺和開發同學帶來許多便捷。
EVA Store 接收到的是一些原始資源，比如設計師給你切好的圖檔、從專業軟體導出的動畫檔案（一般包含圖檔和JSON），或者是一份 Shader 代碼。
進入 EVA Store 時，首先需要把這些資源落庫友善進行管理，通常會基于一套 SaaS 服務來管理和檢索它們。
落庫後，這些資源會被交由預處理工具來進行針對性的處理，比如可以将圖檔合成雪碧圖、可以檢測龍骨的正确性、以及最後對圖檔和資料的壓縮優化等。這些預處理，既可以是自動化的，也可以通過一些編輯器來可視化的進行。
最後輸出的就是符合引擎和工作站要求的素材。
圖中可以清楚的看到從原始資源到标準素材的流進路線，其中核心部分就是eva-assets 。它是一個 JS SDK ，集中了 SaaS 服務調用、資源預處理，檔案系統和網絡的擴充卡，使其既能在 Web 環境運作，也能在 Node 環境運作。
EVA Store 基于這個 SDK 完成素材中心網站的功能接入。它也可以被 Editor 或 EVA Workstation 使用來管理和處理這些素材。
如果這些架構的剖析看的還不過瘾，可以關注後續淘系互動出品的更多技術分享和文章。
洞察時代演變：無論是堅持業務開發的同學，還是專精于架構研究的同學，都需要會創造價值。
所有業務都不是一朝變成現在的形态的，淘系互動業務近三年也經曆了一些變化，我把它們簡單劃分成三個時代。
動畫時代
在這個時代，産品希望在原本枯燥的界面上，用動畫來豐富需要表達的事物。例如，大促開始時的一段揭幕動畫或是引導點選按鈕的一段引流動畫。這個時代的動畫，基本不需要太多互動，展示給使用者動畫播完就結束了。
frameLabelStart-
https://ucc-vod.alicdn.com/sv/15bd0524-1713eda3d75/15bd0524-1713eda3d75.mp4-frameLabelEnd
針對這樣的産品需求，前端的解決方案會有這麼三種：
實際開發中，在拿到設計師的動畫 Demo 稿或者僅有産品提供的動畫示意稿時，真要把它還原出來可能要花費大量的精力，有時跟 Demo 稿比起來也會差強人意。
是以這個時代，重點要解決生産品質的問題，也就是動畫還原的精細度。這時候，你可能會想到古老的 Flash，這個在90年代特别風靡的動畫制作軟體，設計師制作完動畫後，工程師們可以通過 ActionScript 來執行一些業務邏輯，并輕松的運作在 Web 環境下。
的确，Flash 的制作和開發工作流是非常“先進”的，它讓設計師和工程師們能做自己最擅長的事情，且互相配合的非常默契。那麼在當下，是否還有這樣的工作流可以讓它們各司其職呢？答案當然是有的。
在上圖中，設計師的生産工具變得更加專業和強大，比如 After Effect、DragonBone，這讓設計師們擁有了廣闊的創作空間。這些生産工具可以儲存為源檔案或者導出視訊、幀序列、GIF 等。
但源檔案不能在 Web 上運作，視訊、幀序列、GIF 也不是我們想要的。這就需要一個把源檔案轉成對 Web 友好的動畫格式（圖檔資源+JSON 資料），這一步很多生産工具也會内置進去。
但在一些複雜的動畫場景裡，需要多段動畫或多種動畫，這個時候就需要有一個場景編輯器來組合這些動畫。比如 Unity 編輯器就可以是這樣的一個場景編輯器，它可以把多種動畫拼接在一起，變成一個完整的動畫場景。之後，把重組的資源和資料再導出給 Web。
在 Web 上，就需要一套能解析這個動畫格式的引擎，它可以被叫做動畫引擎。這個動畫引擎在運作時解析資料、分析資料，并逐幀繪制到畫布上，完成動畫内容的播放。迄今為止，這樣的動畫引擎也是非常多的，而絕大多數引擎也會提供支援播放這些動畫的插件，EVA JS 同樣可以支援雪碧圖動畫、骨骼動畫、Lottie 動畫等常見的動畫格式。
借助這樣的工作流和工作模式，能99%的還原動畫精細度，且因為過程中并不需要開發者來還原動畫展現，整體的效率也能得到極大的提升。
大家如果對動畫的制作和原理感興趣，也可以順道去閱讀我早幾年在大會上分享的兩個話題：
《暢想動畫制作的樂趣》和
《漸進式動畫解決方案》。
互動時代
來到了互動時代，這個時候産品已經不滿足單純的動畫展示給使用者，而是期望和使用者産生更多的互動。在動畫時代沉澱下來的工作流和引擎，基本能滿足這類需求。然後核心問題是，在不同的大促、不同的活動中，産品希望能複用這些作品，加以變化并且能快速上線，設計和開發也因為花了較大精力去完成某個作品，希望能讓它發揮更多的價值。是以這個時代，重點要解決生産關系的問題。
解決這樣的問題，最佳實踐通常是利用子產品化搭建的方式。把最初的項目沉澱為一個子產品，這個子產品封裝了主體邏輯，并提供了可營運化的服務功能。
在沉澱這個子產品的時候，一定要和産品以及設計充分溝通，把整個作品以産品化的方式進行重新梳理，并且預想可複用的場景，增加子產品的靈活性。之後需要有個業務平台面向這類需求以搭建的方式選擇這些子產品并配置相關的資料。
子產品和業務平台的關系是一對多的，也就是傳遞給業務平台的子產品，是統一标準、統一體系的，不同業務特性可以架設不同的平台，走不同的投放邏輯和營運政策，這些是業務特有的，并不附屬于子產品本身。
搭建的頁面中，除了互動類的子產品還可以添加其他商品類的子產品等等。這樣帶來的好處是，作為開發和設計同學隻需面向子產品開發、傳遞符合标準的子產品即可，并不需要面向某個業務項目進行開發。
有了這樣一層關系後，以往優秀的互動産品就可以通過子產品的方式，賦能給更多的業務，進而發揮更大的價值。
業務複用的視訊：frameLabelStart-
https://ucc-vod.alicdn.com/sv/3cef2890-1713eda581e/3cef2890-1713eda581e.mp4-frameLabelEnd
娛樂化時代
到了現今，已經全面進入了娛樂化的時代。在這個時代，商業和互動結合的非常緊密。淘系在2年前漸漸孵化并生長出多個千萬級别的娛樂化互動産品，包括金币莊園、天貓農場、淘寶人生等。這些産品不約而同的用娛樂化互動的手段，同自營運積分體系、全網商家、特色賣家等互相合作聯通，實作互動流量變現的高價值。在這些産品的孕育和發展中，比起以往僅存在于大促活動的互動項目，有着維護成本上的差異。是以在這個時代，重點要解決生産疊代的問題。
但這裡說的疊代，并不是想說把項目怎麼維護好，單測搞起來，做靈活開發之類的事情。因為疊代的意義是能給讓業務不斷的往前推進，而不單隻是讓代碼不出問題。是以，在分析整個業務推進的過程中，有幾個方面是需要去關注的。
第一，産品要和業務的區分開，産品是承載功能，而業務是把功能在某個時間段以某種外化的形式表達給使用者。比如，彈窗元件是一個産品，而金币莊園更新的提示彈窗就是個業務。是以通常這類産品元件，也可以叫做業務元件，它高度抽象業務中的某些行為，并長期沉澱提供給業務日常營運使用。這種業務元件其實和互動時代的子產品很像，也是同一種産品化的思路，隻不過顆粒度可能更小一點。在項目長期的運作中，我們都要面向某種産品能力進行疊代，而不要陷入單次的業務邏輯中。
第二，在有了業務元件後，業務邏輯就可以架在業務元件之上，專注于短周期内的疊代。這部分業務邏輯還可以用編排的方式來提高效率。關于邏輯編排的技術和方案，淘系互動團隊會在之後的文章中為大家分享。
第三，業務不斷向前發展，背後的資料也在不斷的産生變化來适應業務的需求。資料變化的周期相對來說是要長一點的，而一旦發生變化，就會牽連到業務元件以及業務邏輯。我們通常希望，服務端在傳回資料時，盡量不要去動原來的資料結構，隻增加類型或可枚舉的值，事實當然不可能經常如願以償。是以也需要适時的抽象産品能力，讓一個基礎的系統來提供穩定資料形态。在互動中，比如有任務系統、養成系統、集換系統等等。這些基礎系統的資料在一定周期内是穩定的，并且可以滿足不同的業務需求，完成不同的項目。
當需要面向多個獨立疊代的事物時，前端在代碼上的分層架構也要能适時的去配合這些疊代，并減少互相間的耦合。大家可能已經想到了MVP（或MVC）架構。
上面的圖基本很清楚了，不再贅述，隻不過在娛樂化互動裡，有專門的一個Game View 來展示互動場景，同時會有一個 UI View 來展示互動界面。至于為什麼要把互動場景和互動界面區分開，主要是因為互動場景是逐幀重新整理的，而互動界面不需要這麼高頻的重新整理，分離後能使用各自合适的設計模式來處理。比如互動場景就可以用 ECS，而互動界面可以用 PureComponent。
人人可開發、處處有互動
到文末了，不免想打個小廣告，淘系技術部前端互動團隊的使命是“人人可開發、處處有互動”。基于這樣的目标，我們會提供統一的互動産品和研發平台來支撐互動業務的研發。同時整個淘系技術部前端團隊，以技術驅動商業發展，不設界限的在前端相關領域深入突破，如互動、搭建、AI、Node、Serverless、中背景、雲研發、終端技術等領域，以技術探索未來。
如果你也想一起定義未來，就快點加入我們一起改變世界吧！履歷投遞到郵箱：[email protected]。