從動效設(shè)計到代碼--深度賞析網(wǎng)易云音樂2018年度聽歌報告H5

前言

作為 2019 年第一個爆款刷屏 H5 項目，「網(wǎng)易云音樂 2018 年度聽歌報告」除了走心的文案、精美的頁面，也包含了不少有意思的動效。大家應(yīng)該能想到，這些動效的設(shè)計是出自我們設(shè)計團隊，但你可能沒想到的是，實現(xiàn)這些動效的前端代碼也有一大部分也是設(shè)計師「寫」的哦。

據(jù)不完全統(tǒng)計，可能有上萬行之多（為什么會這么多，看完本文就知道了。另外，這個大項目有「聽歌報告」和「一歌一遇」兩部分，本文主要聊聊「聽歌報告」這塊兒。）

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

情感化設(shè)計

「報告」是一個聽起來挺枯燥的詞語，我們希望能通過設(shè)計，讓文字和數(shù)據(jù)不那么冰冷嚴(yán)肅。我們采用了陽光溫暖的配色，營造了唯美清新的場景，和穿著小紅褲褲悶騷的你。這些人物和場景所搭配的動效也得是有溫度的，整體的基調(diào)不是酷炫狂霸拽，不是宅萌騷浪賤，我們的每個頁面都是柔緩又愜意，慵懶且清新。

基于這個思路，這些動效要簡單而合理、看著舒服不跳戲，每一個動作行為傳遞給用戶的情緒要和整體視覺氛圍一致，例如這個頁面：

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

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

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

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

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

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

不喧賓奪主

每一個頁面不光有圖片、動效，最重要的其實應(yīng)該是文字和數(shù)據(jù)。所以我們的動效不僅要考慮好不好看，還不能讓它過于誘惑，得適當(dāng)?shù)淖層脩舻淖⒁饬劢沟轿淖中畔⑸稀?/p>

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

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

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

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

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

錦上貼花的小細(xì)節(jié)

我們?yōu)檫@些場景也添加了很多小細(xì)節(jié)，讓整個頁面更豐富生動。比如：報告的封面，晃動手機可以看到背景的星空、星球元素是會跟著動的，我們用一個簡單的視差效果豐富了背景的層次。

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

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

與研發(fā)對接

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

為什么不用 GIF？

GIF 是一種非常古老的格式，它的很多特性已經(jīng)跟不上時代了，比如落后的壓縮算法導(dǎo)致想要保留高清畫質(zhì)圖片體積會很大，而它的取色范圍只有 2 的 8 次方 也就是 256 色，作為對比 PNG、JPG 格式最大可以用到 2 的 24 次方也就是 1600 萬種顏色。

最明顯的例子就是彩色漸變在 GIF 里都是分層的，因為它沒有足夠的顏色來過度。另外就是如果需要導(dǎo)出透明底的 GIF 其邊緣會有「毛邊」，這也是無奈卻無解的。

那么視頻呢？

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

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

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

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

SVG 也是個不錯的選擇，實際上最后項目里也用到了不少 SVG 動畫，他的好處是可以當(dāng)成 GIF 圖片來用，不需引入第三方庫和學(xué)習(xí)新的操作方案（沒錯說的就是 Lottie）。

但這個格式目前沒有太好的原生量產(chǎn)方案，對于少數(shù)幾個適合用 SVG 動畫來表現(xiàn)的場景——路徑動畫、遮罩動畫等，可以花點時間手敲代碼來實現(xiàn)。而且這個項目用的多數(shù)是位圖，很少矢量圖，SVG 很多特性沒有用武之地。我之前也寫過關(guān)于 SVG 動畫在 H5 項目中應(yīng)用的文章，感興趣的同學(xué)可以看下：「看相」黑科技：SVG 動畫在 H5 項目中的運用

也曾經(jīng)考慮過大名鼎鼎的 Lottie ，這個方案對設(shè)計師來說是方便了，能直接導(dǎo)出「代碼」，但它也不是「萬能」的：

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

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

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

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

然后說說為什么選擇了 CSS 。首先研發(fā)同學(xué)十分熟悉這個格式，能更好的整合進整個項目。它的兼容性好，不需要什么第三方庫支持，是個瀏覽器就能用；CSS 主要是通過對圖片資源的位移、旋轉(zhuǎn)、縮放、透明度等屬性做變化來實現(xiàn)動畫，這雖然限制了表現(xiàn)力，在本項目中卻是夠用了。

而對于之前提到過的頭發(fā)、衣物飄動動畫，CSS 有個取巧但可行的方案來呈現(xiàn)——精靈圖動畫（CSS Sprite Animation），我之前也制作過一個 AE 動畫導(dǎo)出為 CSS 精靈圖動畫的工具，感興趣可以看下：https://zhuanlan.zhihu.com/p/34731896

設(shè)計師主要是在 AE 里設(shè)計動畫。AE 的強大無需贅言，位移、旋轉(zhuǎn)、縮放、透明度動畫可以說是非?；A(chǔ)的操作，完成不了的我們就用精靈圖哈哈。

那么問題來了，做好的動畫怎么導(dǎo)出給研發(fā)？之前市面上還沒有能直接干這事的工具……

不過現(xiàn)在有了：

BX-AE2CSS 是一個將 AE 動畫導(dǎo)出為 圖片 + CSS 動畫代碼 的工具，通過下面這個視頻看看他是怎么工作的。

將AE動畫導(dǎo)出為CSS代碼

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

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

這其實不是在炫耀，而是目前 BX-AE2CSS 的一個局限。由于時間和精力（其實是水平）有限，我只能做到逐幀導(dǎo)出動畫數(shù)據(jù)，一個圖層一幀就是一行，一秒一般是 30 幀，可以腦補一下幾個頁面下來的有多少行……這樣雖然可以兼容表達(dá)式等復(fù)雜動畫操作，但并不是一個「優(yōu)雅」的解決方案。

CSS 動畫是可以指定關(guān)鍵幀之間的緩動插值函數(shù)的，如果能做好轉(zhuǎn)換（ AE 里的插值曲線和 CSS 還是略有不同的），導(dǎo)出的代碼也會更高效精簡。這也是我之后的一個改進方向，希望能有所突破。

雖然這個工具現(xiàn)在還很初級（我把版本號先設(shè)為 0.1 了哈哈），導(dǎo)出的代碼質(zhì)量也不高，但它已經(jīng)達(dá)到「可用」的級別——經(jīng)過項目驗證的哦。

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

Github地址：https://github.com/bigxixi/ae2css

作者：西西，網(wǎng)易云音樂資深動效設(shè)計師，主要負(fù)責(zé)網(wǎng)易云音樂品牌推廣H5的動效設(shè)計。擅長設(shè)計動效，也擅長于研發(fā)配合將動效實現(xiàn)。編寫過一些Sketch插件和AE腳本。

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@胡熠楓