前言
在日常開發中，經常會碰到包含有大量動效的需求。當一個頁面包含有大量動效時，經常會出現卡頓、效能不佳的問題。
正所謂開發三天，優化兩星期，為了優化這些動效，很多同學只能一點點摳程式碼，探尋載入時間點、渲染速度、資源體積等優化點的極限，前端、設計以及測試都疲於奔命。
古語有云，因材施教，話句話說，給合適的人，合適的東西。套用在開發中，可以理解為，為不同使用者提供不同的產品效果以提升使用者體驗。
在動效開發上運用這一點，最後得到的方案就是動效降級。
簡介
一句話概括動效降級，即根據機型效能對不同機型進行分級，不同級別提供不同動效。
舉個例子，面對高中低端機型，從高到低可以分別提供：視訊動畫、Lottie 動畫以及 CSS 動畫。
個人認為，針對中低端機型，更重要的是讓使用者流暢地體驗功能，而不是執著於華麗的效果。
方案設計
機型劃分
動效降級的核心在於為合適的機型提供合適的動效，所以，動效降級的第一步是根據規則對不同機型劃分不同級別。
IOS 的機型劃分相對簡單，只需依據機型判斷即可，如 iphone6 以下為低端機，iphone8 以下為中端機。
Android 的機型、系統繁多，一個個判斷明顯不可行，所以需要機型打分平臺對 Android 機型進行打分，最終使用評分劃分機型級別。
除此之外，還需要維護一個機型黑名單，黑名單主要包括硬體尚可，但是實際顯示效果不佳的機型。當命中黑名單時，可以直接降級。
注意，分為高中低三種機型只是一種比較常見的做法，但不是唯一的做法，在實踐中，將所有機型分為兩種、四種甚至五種級別都是可以的，根據專案自行劃分即可。
規則獲取
確定完機型規則後，我們還需要獲取規則。此時，有兩種處理方案：規則寫在程式碼中或服務端下發。
規則寫在程式碼中相對更加簡單，效能相對較好（因為省略了請求規則的過程），但是維護不便。
服務端下發方案則剛好相反，易於維護但是效能相對差一些。
如何取捨可以看具體需求。
降級策略
動效降級的策略可以根據不同專案不同背景自行制定，總體來說，按照越高階的機型使用越消耗效能的動效。
舉個例子：
在活動頁首頁有一個視訊動畫，針對高階機型保持不變，而中端機型可以使用 Lottie / Canvas 動畫，最後的低端機型可以使用 CSS 動畫或者 GIF 圖片，在最極端情況下，甚至直接使用靜態圖片或者直接置為空。
TIPS：由於降級流程相對固定，所以可以封裝元件，統一使用降級元件進行開發。
特殊場景處理
雖然從原則上來說，所有動效都需要進行動效降級，但是存在部分特殊場景需要特殊處理。
舉個例子：
有一個倒數計時頁面，使用了很絢麗視訊動畫，按照制定規則，需要降級為 Lottie 動畫，但是產品經理要求降級為 CSS 動畫，此時，就需要進行特殊處理。
由於動效場景變化較多，所以降級元件需要提供足夠靈活的鉤子和配置才能適應更多場景。
兜底處理
前面說的都是根據機型判斷、場景判斷主動使用動效降級。其實，進行兜底處理的時候，也可以被動使用動效降級。
舉個例子：
在某個高階機上，照理說應該播放視訊動畫，結果對應的 CDN 資源出問題了，無法拉取到視訊動畫資源，最終導致播放視訊動畫失敗。此時，可以使用被動動效降級，自動將視訊動畫降級為 Lottie 動畫。以此類推，高階動效降級為中端動效，中端動效降級為低端動效，最終效果是雖然出了 BUG，但是使用者沒有感知到 BUG。
這就是傳說中的：使用者都沒有感知到 BUG，那就沒有 BUG。
埋點統計
完成了動效降級之後，還需要進行埋點統計。
動效降級埋點的意義在於，統計降級佔比以及對應機型等。只有獲取了相關資訊，才能動態調節規則配置，達到最好的動效降級效果。
總體效果
優勢
動效降級的優勢非常明顯：
- 大幅提升了原本難以優化的中低端機型幀率（效能指標狂喜系列
- 大幅降低資源消耗，如 CDN（真 · 我為公司省了幾千萬系列
- 兜底處理可以顯著提高穩定性，預防 BUG、雪崩、擊穿等問題（半夜安心睡個好覺系列
可以發現，動效降級通過犧牲了一部分效果，大幅提升了效能、穩定性以及資源消耗，這在大型專案中非常重要。
劣勢
動效降級其實也有一定的缺點，比如：
- 前端需要實現多套動效方案（前端想要打人系列
- 設計師需要提供多套動效方案（設計師想要打人系列
- 更多的動效方案，帶來了更大的測試壓力（QA 想要打人系列
- 產品經理不一定同意動效降級（產品經理正在打人系列
可以發現，動效降級的主要劣勢在於需要更多的人力，以及會為了效能犧牲一部分效果。
綜上所述，不能盲目使用動效降級方案，必須想辦法克服動效降級的缺點，發揮它的長處，方能揚長避短，達到最好效果。
總結
動效降級與其說是一個技術方案，更可以認為是一個理念：為不同機型提供不同的但更合適的體驗。這種理念不止可以作用於動效，還可以作用於圖片等其他方面。
在我看來，使用者的整體體驗不僅僅依賴於各種華麗的特效，也不僅僅依賴於極致流暢，而是在兩者之間的平衡。兩者就像天平的兩端，一側的失衡都會導致體驗的斷崖式下滑。身為研發工程師，所做的就是維持二者的平衡，以實現最好的使用者體驗。