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

前言

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

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

因?yàn)槊總€(gè)用戶的數(shù)據(jù)是不一樣的，有的頁面可能沒有展示在你的聽歌報(bào)告里，下面的錄屏是全部的頁面：

情感化設(shè)計(jì)

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

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

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

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

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

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

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

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

不喧賓奪主

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

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

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

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

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

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

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

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

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

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

與研發(fā)對(duì)接

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

為什么不用 GIF？

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

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

那么視頻呢？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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