一、背景
在優酷客戶端開發的日常工作中，存在着大量動效場景需求，如 ToastView 顯示與消失、頁面推入的軌跡動效、Pop 彈出等。雖然 iOS、Android 都提供了多種友好的動效開發方案，但由於要進行大量的參數配置及調優，面對動效開發工作，大多數開發同學的第一反應是頭疼。
動效設計需求產出後，在與研發對接過程中，存在如下一些問題：
1）同一動畫，不同的開發人員實現的效果有差別；
2）同一動畫，iOS 端和 Android 端實現的效果有差別；
3）Anticipate、Overshoot、Bounce 曲線，設計師無法提供準確參數給開發，實現出來的效果隨機性強；
4）部分開發人員對系統自帶曲線函數不熟悉，會導致降級應用線性或減速曲線，影響動態效果。
爲了徹底解決上述痛點問題，優酷應用心中開發團隊與設計團隊共同研發推出了優酷跨平臺動效解決方案——畫眉，目的是從設計標準化、研發組件化、配置工具化三個方向，使得動效從設計-研發-驗收-上線的全鏈路上實現統一、提效。
優酷跨平臺動效方案，底層基於算法策略，後續會陸續開放源代碼，對於廣大的客戶端場景動效快速上線，具有廣泛的意義。
二、什麼是畫眉
“畫眉”是一種小巧又靈動的鳥類，優酷動效跨平臺解決方案以此取名，也因爲方案本身的輕量化特性，業務方只需要通過極少量的代碼接入，即可完成複雜的動效還原編碼工作。
畫眉-優酷跨平臺動效解決方案由兩部分構成：設計側可視化動效編輯工具、研發側跨平臺 SDK，目標是徹底打通研發與設計鏈路，降低溝通成本，縮短驗收週期，統一多端體驗。
三、技術方案
- 架構路線
- 技術實現
考慮到性能以及平臺特性，在 iOS 端與 Android 端進行 SDK 策略落地時，均基於 AOP 的思想，提供了最爲輕量化的技術方案。由於目前優酷客戶端底層通過 OneService 提供服務， ThrushSDK 在優酷業務內落入 OneService 體系內，便於各業務的無縫接入。
1）iOS 端技術方案
SDK 接口層採用 Category 方案，通過 AOP 思想來簡化調用複雜度。
CALayer + MotionCurveX 爲 CALayer 的所有可動畫屬性，按照動效曲線能力提供支持，且在動畫完成後，無需再次設置目標值。ThrushSDK 將常用的 7 種動效曲線，進行底層算法實現，使用者只需指定曲線枚舉，即可實現標準化的動效。
底層 C 函數算法庫，可以通過標準曲線實現代碼來一探究竟，如圖所示：
2）Android 端技術方案
爲了降低 java 調用 C 的性能損耗，Android 端採用差值器 Interpolator 來實現曲線動效。
- 可視化動效編輯工具
1）功能架構
2）體感
3）工具介紹
ThrushEditor 目前基於 iOS 平臺開發，目標使用人羣爲動效設計師。編輯器對於動效創作最大的提效點在於：動效可視化預覽、簡化參數調優、動效代碼導出。設計師在確認動效參數後，使用導出工具，一鍵導出 iOS | Android 代碼，完成與開發工程師的無縫對接。
四、總結
畫眉-優酷跨平臺動效解決方案推出後，目前已經在優酷 APP 內多個場景投入使用，在雙端體驗上也完全達到了設計初的各項預期。
- 優酷 APP 內場景落地
| 業務 | 場景 | 端 |
|---|---|---|
| 首頁 | 搜索轉場動效 | iOS|Android |
| 語音搜索 | 文案動畫 | iOS|Android |
| 熱點 | 彈性動效 | iOS|Android |
| 個人中心 | 消息氣泡 | iOS|Android |
| 播放頁 | 臻享切換動效 | iOS|Android |
- 近期規劃
1）開源：由於畫眉 SDK 本身是純算法實現，沒有任何底層庫強依賴，因此，後續會推進畫眉 SDK 以及可視化編輯工具的集團內開源及外部開源，讓其能效在更大的場景發揮作用；
2）多平臺：以 iOS、Android 雙端的效果驗證作爲底座，針對其他業務同學的需求，畫眉會推出針對 weex 及 H5 的解決方案，讓更廣泛的開發同學受益；
3）品牌化：畫眉跨平臺動效解決方案會與設計中臺聯動，以大文娛技術品牌的方式將標準化、模塊化、工具化三位一體的整套策略進行行業宣發。
作者 | 阿里文娛無線開發專家 祁序