作為2019年第一個爆款刷屏 H5 項目，「網易云音樂2018年度聽歌報告」除了走心的文案、精美的頁面，也包含了不少有意思的動效。大家應該能想到，這些動效的設計是出自我們設計團隊，但你可能沒想到的是，實現這些動效的前端代碼也有一大部分是設計師「寫」的哦。據不完全統計，可能有上萬行之多，為什么會這么多，看完文章就知道了。這個大項目有「聽歌報告」和「一歌一遇」兩部分，本文主要聊聊「聽歌報告」。

讓我們先來回顧一下，也可以在網易云音樂app 里搜「聽歌報告」：

因為每個用戶的數據是不一樣的，有的頁面可能沒有展示在你的聽歌報告里，下面的錄屏是全部的頁面：

△ 網易云音樂2018年度聽歌報告

情感化的設計

「報告」是一個聽起來挺枯燥的詞語，我們希望能通過設計，讓文字和數據不那么冰冷嚴肅。我們采用了陽光溫暖的配色，營造了唯美清新的場景，和穿著小紅褲褲悶騷的你。這些人物和場景所搭配的動效也得是有溫度的，整體的基調不是酷炫狂霸拽，不是宅萌騷浪賤，我們的每個頁面都是柔緩又愜意，慵懶且清新。基于這個思路，這些動效要簡單且合理、看著舒服不跳戲，每一個動作行為傳遞給用戶的情緒要和整體視覺氛圍一致，例如這個頁面：

纜車前進，如果只是遠景的山橫向移動效果是非常死板的。回想一下自己坐纜車時的感受，是四平八穩還是搖搖晃晃？于是我們加上纜線和音符車體緩緩的交錯晃動，以及纜線上的高光亮斑，整個頁面就生動了許多。畫面背后我們想傳達的情緒就是你在輕松愉快地度假，通過一段溫馨的旅程來回顧這一年里在云村的點點滴滴。你感受到了嗎？

夜晚是孤寂冰冷的，但我們相信喜歡深夜聽歌的你絕不是那么冷酷無情，耳邊的旋律就如天際透出的光，照亮了夜，溫暖了你，而你也在這束光里衣袂飄飄自在飛翔，似是無拘無束，又好像在追尋著什么。畫面里我們讓光線明暗變化，人的身體微微浮動，飄動的衣服和頭發讓人物如迎風飛翔，希望能引起夜貓子們的些許共鳴。

同樣是騎車，不同的場景、不同的騎法傳遞的情緒也是不同的。這個頁面的關鍵詞是「專一」，我們設計的場景是你選中了這條路，就算是山坡也會走下去。一開始我們參考真實的場景，上坡嘛就用力蹬（草稿，忽略人物細節）。

但是這個費力的感覺真的是我們要傳遞的情緒嗎？專情于一首曲子應該是「享受」而不是「忍受」，最終我們選擇了這個乍一看不太符合現實規律的動作——先快速蹬幾下，再滑行一段。這種騎法會讓人有「爽快」的感覺，至于上坡怎么也那么輕松？那說明你已經輕車熟路了，對這條路足夠「專一」嘛。

類似的問題在這個頁面也遇到了。一開始我們參考了真實的提琴演奏動作，這看起來似乎也挺像在拉提琴的，但總覺得有不太舒服的地方。

經過討論，我們發現它的問題就在于「過于真實」而「引起不適」了。尤其是那個手臂顫抖，會讓人覺得他拉琴拉得很費力，而我們的場景、BGM 都是很輕松的，所以我們最后還是讓它歸于平緩。

不喧賓奪主

每一個頁面不光有圖片、動效，最重要的其實應該是文字和數據。所以我們的動效不僅要考慮好不好看，還不能讓它過于誘惑，得適當的讓用戶的注意力聚焦到文字信息上。

例如這一頁，之前的版本：

貓咪十分歡脫，小尾巴甩的飛起，單看畫面還挺可愛的。但是在整個頁面里已經有了波浪起伏的夜幕、遠近交替的手臂，再加上貓尾巴，視覺焦點十分分散，用戶的注意力難以聚焦，很容易就忽略掉文案。

于是最后我們還是讓主子安靜點，做一只安靜的夜貓子，整個頁面也沒那么亂了。

這個頁面一開始也是想做的真實一點，我們把每個指節都拆出來做動作，結果發現如果要像現實中的翻繩游戲那么玩，動作復雜、制作周期長不說，用戶在看到這個頁面時的關注點也都在手上，文字信息可能都給忽略了。

于是我們做了抽象和簡化，只添加了簡單的「松弛?- 緊繃」動作，并控制好節奏降低頻次，平衡了信息呈現的需求。

錦上添花的小細節

我們為這些場景也添加了很多小細節，讓整個頁面更豐富生動。

比如報告的封面，晃動手機可以看到背景的星空，星球元素是會跟著動的，我們用一個簡單的視差效果豐富了背景的層次。

又比如這個頁面，當秋千往下蕩的時候我們給小人設計了一個仰頭的動作，把身體舒展開，看著這個秋千蕩的爽啊~

其他還有時不時飄動的頁面，眨眼睛等小細節，希望這些點點滴滴給你帶來了舒適的體驗。

與研發的對接

這是一個經常被忽略又挺重要的話題，在設計之初我們就和研發簡單溝通了一下，綜合效果、開發成本、資源大小等因素，動效主要會用 CSS 代碼來實現。

為什么不用 GIF？GIF 是一種非常古老的格式，它的很多特性已經跟不上時代了，比如落后的壓縮算法導致想要保留高清畫質圖片體積會很大，而它的取色范圍只有2的8次方，也就是256色，作為對比 PNG、JPG 格式最大可以用到2的24次方，也就是1600萬種顏色。最明顯的例子就是彩色漸變在 GIF 里都是分層的，因為它沒有足夠的顏色來過度。另外就是如果需要導出透明底的 GIF，其邊緣會有「毛邊」，這也是無奈且無解的。

那么視頻呢？雖然在很多 H5 項目里都用視頻來承載動效，但一個視頻想要在現在這個各種奇怪的高清大屏橫行的年代保持清晰，體積就小不了，也不能做成透明（至少主流的 mp4 不行，其他格式兼容性不行）來配合靜止圖片適配各種機型，對這次的項目來說還是不太合適。

我們還考慮過志在取代 GIF 的 APNG/WEBP 格式，且不說兼容性的隱憂，對于透明底的圖片，相對于 GIF 畫質提升的同時，體積也變大不少。

前面幾個說的都是不需代碼的資源格式，給過去就能用。我們還考慮了結合代碼的其他方案：

序列幀（JavaScript代碼控制播放）的好處是畫質就取決于圖片畫質，不過根據研發同事的反饋，少量、小體積的情況下還可以，圖多了對性能不太好。

SVG 也是個不錯的選擇，實際上最后項目里也用到了不少 SVG 動畫，它的好處是可以當成 GIF 圖片來用，不需引入第三方庫和學習新的操作方案（沒錯說的就是 Lottie）。但這個格式目前沒有太好的原生量產方案，對于少數幾個適合用 SVG 動畫來表現的場景——路徑動畫、遮罩動畫等，可以花點時間手敲代碼來實現。而且這個項目用的多數是位圖，很少矢量圖，SVG 很多特性沒有用武之地。

我之前也寫過關于 SVG 動畫在 H5 項目中應用的文章，感興趣的同學可以看下：https://zhuanlan.zhihu.com/p/39926486

也曾經考慮過大名鼎鼎的 Lottie ，這個方案對設計師來說是方便了，能直接導出「代碼」，但它也不是「萬能」的。

對研發來說播放 Lottie 動畫需要引入一個第三方庫，這勢必增加了項目文件體積（這個庫其實也不大），也增加了一定的風險（用的人少，文檔匱乏，出 BUG 了怎么辦？和其他的庫沖突了怎么辦？），并且學習一套它的用法（不僅僅是播放，適配之類的操作也是個問題，Lottie 的文檔確實很匱乏），在項目時間不是很充裕的情況下這些都是風險。

Lottie 本身是針對矢量動畫開發的，而這個項目的視覺風格并不「矢量」，雖然不是不能用，但在效率上會有折扣。另外有的效果，比如頭發、衣服的飄動，尤其是對位圖做這種動畫，Lottie 也是無能為力。

所以最終我們沒有用 Lottie 的方案，不過我個人還是很看好 Lottie 的，用好了能極大提高動效產出效率。不僅 H5，更重要的是安卓、iOS平臺都能用，研發朋友們可以多多了解一下。另外我一直在做 Lottie 對應的 AE 導出插件（Bodymovin）的漢化，有需要的朋友可以到這里下載：https://zhuanlan.zhihu.com/p/34700530

還有一個冷門但很有潛力的方案——@PonyCui 開發的 SVGA 。這個格式現在主要應用于一些直播平臺的禮物動畫，對位圖動畫十分友好，而且能像 Lottie 一樣直接從 AE 里導出。沒有選用的原因也是類似 Lottie，對可能存在的風險有所顧忌。

為什么選擇了 CSS？首先研發同學十分熟悉這個格式，能更好的整合進整個項目。它的兼容性好，不需要第三方庫支持，是個瀏覽器就能用。CSS 主要是通過對圖片資源的位移、旋轉、縮放、透明度等屬性做變化來實現動畫，這雖然限制了表現力，但在本項目中卻是夠用了。而對于之前提到過的頭發、衣物飄動動畫，CSS 有個取巧但可行的方案來呈現——精靈圖動畫（CSS Sprite Animation），我之前也制作過一個 AE 動畫導出為 CSS 精靈圖動畫的工具，感興趣可以看下：https://zhuanlan.zhihu.com/p/34731896

設計師主要是在 AE 里設計動畫。AE 的強大無需贅言，位移、旋轉、縮放、透明度動畫可以說是非常基礎的操作，完成不了的我們就用精靈圖。那么問題來了，做好的動畫怎么導出給研發？之前市面上還沒有能直接干這事的工具。

不過現在有了：

BX-AE2CSS 是一個將 AE 動畫導出為「圖片 + CSS 動畫代碼」的工具，通過下面這個視頻看看它是怎么工作的。

△ 將AE動畫導出為CSS代碼

它可以讀取 AE 里圖層的位移、旋轉、縮放、透明度動畫信息，以及做好標記的圖層導出為精靈圖動畫，最后生成一個 HTML 文件來預覽。導出的產物只有圖片和 CSS + HTML 代碼，沒有 JS，沒有第三方庫，夠純粹吧。這樣在完美還原動畫的同時可以無縫插入 H5 頁面，之后如果有小的修改（替換圖片等）也十分簡單方便。

還記得我在文章開頭說過，我們設計師團隊也貢獻了可能上萬行的代碼。

這其實不是在炫耀，而是目前 BX-AE2CSS 的一個局限。由于時間和精力有限，我只能做到逐幀導出動畫數據，一個圖層一幀就是一行，一秒一般是30幀，可以腦補一下幾個頁面下來的有多少行。這樣雖然可以兼容表達式等復雜動畫操作，但并不是一個「優雅」的解決方案。CSS 動畫是可以指定關鍵幀之間的緩動插值函數的，如果能做好轉換（ AE 里的插值曲線和 CSS 還是略有不同的），導出的代碼也會更高效精簡。這也是我之后的一個改進方向，希望能有所突破。

雖然這個工具現在還很初級（我把版本號先設為0.1了哈哈），導出的代碼質量也不高，但它已經達到「可用」的級別——經過項目驗證的哦。

我把它開源到 Github 上了，更詳細的安裝、使用教程歡迎訪問項目主頁，歡迎大家試用，順便求 Star！點擊查看源碼！

歡迎關注作者的知乎專欄「Motion Fun」