Lottie動畫秘籍！騰訊QQ超清表情大揭秘

“QQ 表情怎么突然變大了？”“這么絲滑 Q 彈，忍不住多看幾眼，越看越上頭。”這些讓你一眼上頭的絲滑 QQ 大表情，既不是 bug，也不是簡單的表情放大。這些生動的表情背后，是 QQ 團(tuán)隊歷時幾個月對表情設(shè)計與技術(shù)的研究創(chuàng)新。無比流暢的表情背后，是一個完全革新的表情制作技術(shù)和一種全新的表情格式--Lottie 超清表情。那么什么是超清表情，現(xiàn)在我就帶你研究。

在技術(shù)浪潮中被遺忘的表情

技術(shù)的發(fā)展讓人們的線上生活越來越真實，全真互聯(lián)網(wǎng)的體驗也提上日程。但是作為線上溝通中最基本的圖形化語言，表情似乎一直沒有什么變化。包括 QQ 在內(nèi)的社交應(yīng)用，其表情的迭代似乎一直停留在內(nèi)容層面上的更新，跟進(jìn)熱點玩梗。對比其他領(lǐng)域的圖像創(chuàng)新，例如 4K 超高清電影、新的渲染器帶來更加真實的游戲體驗，游戲引擎打造擬真的虛擬形象來說，無論是黃臉表情還是自制表情包都還比較粗糙，動畫不夠細(xì)膩流暢也缺乏視覺表現(xiàn)力。這是為什么呢？

原因在于表情動畫多為 APNG 和 GIF 格式，其本質(zhì)上是一連串的位圖。那么其流暢度就取決于兩方面，動畫資源本身的流暢度和手機(jī)設(shè)備的播放流暢度。

提高動畫流暢度最直接的方法就是增加幀率，即在一定時間的動畫中增加更多的圖片。但這會導(dǎo)致資源大小激增。而過大的資源會導(dǎo)致手機(jī)卡頓。所以為了保證手機(jī)上播放流暢，大動畫往往需要抽幀。這就導(dǎo)致了手機(jī)上顯示的動畫效果會比實際效果卡頓。

似乎動畫資源的流暢度和手機(jī)播放的流暢度之間有著不可調(diào)和的矛盾。那么魚和熊掌有辦法兼得嗎？

他山之石：Lottie 格式 x 表情動畫

想要同時擁有流暢動畫資源和手機(jī)播放性能，就必須顛覆基于位圖的 APNG 和 GIF 的表情格式。此時我們發(fā)現(xiàn) Lottie 動畫十分符合我們的需求。Lottie 動畫的原理是用代碼來描述動畫的形態(tài)和運(yùn)動，其導(dǎo)出的 JSON 文件是一連串代碼，文件極小，日常表情類的文件基本在幾十 k 左右。

Lottie 格式的動畫其實已經(jīng)有了一些成熟的應(yīng)用，但是此技術(shù)在表情上還少有嘗試。其中有兩個主要原因，一是對于 QQ 這類即時通訊軟件來說，更改一種消息類型的格式需要兼容非常多的場景，會面臨很多的技術(shù)問題；二是用 AE 全矢量繪制的設(shè)計成本很高。在開發(fā)哥哥的日日夜夜的調(diào)試和研究后，我們成功的把這個技術(shù)移植到 QQ 聊天消息中。技術(shù) ready，下面就是設(shè)計大顯身手的時候了。

設(shè)計挑戰(zhàn)：流暢動畫表情的秘訣

技術(shù)問題解決后，讓我們回歸設(shè)計本身。什么樣的動畫表情才會讓用戶感覺更加細(xì)膩流暢？

1. 60FPS 超高幀率

幀率即每秒傳輸幀數(shù)（FPS），是指每一秒傳輸?shù)狡聊簧系漠嬅鏀?shù)。一般來說，幀率越高其畫面越流暢。24FPS 的電影已經(jīng)達(dá)到人眼認(rèn)為流暢的要求。近些年一些高幀率電影（如《霍比特人：意外之旅》）可以達(dá)到 48 幀/秒，其畫面震撼度和清晰度都得到大大提升。而在本次 QQ 超清表情的設(shè)計中，我們則使用了 60FPS 超高幀率，意味著每秒有 60 張畫面閃過，對于人眼來說其流暢度和動作細(xì)膩度達(dá)到無與倫比的效果。

2. 全部矢量繪制

QQ Lottie 表情全部是在 AE 中矢量繪制，即通過調(diào)整錨點實現(xiàn)動畫。矢量繪制可以可以最大程度上減少輸出資源的大小，即使 60FPS 的高幀率動畫資源我們也可以控制到幾十 K。另外通過相同錨點的位移來生成的動畫可以產(chǎn)生更流暢的過渡，不會像位圖播放那樣出現(xiàn)跳變。

3. 增加動畫表現(xiàn)力

在動畫的繪制和測試中，我們發(fā)現(xiàn)擁有如下特質(zhì)的表情動畫更能打動人心，也更能體現(xiàn) Lottie 技術(shù)優(yōu)勢。

善用擠壓和形變：借由擠壓與伸展來強(qiáng)調(diào)瞬間的物理變化，強(qiáng)化動作，達(dá)到 Q 彈的效果。

準(zhǔn)備動作：物體開始動作前展示其預(yù)期動作，讓觀眾能預(yù)知下個動作，讓動畫更生動。

考慮動作慣性：物體在兩種動作中切換時不會立即產(chǎn)生變化，基于慣性應(yīng)該存在上一個動作的跟隨動作。這會讓動畫更加接近現(xiàn)實。

用附屬動作突出主要動作：我們可以利用輔助動作來幫助主要動作傳達(dá)其意義，使其不那么呆板。例如轉(zhuǎn)動中的身體也會跟隨轉(zhuǎn)動有所晃動，同理，手臂也是。情感動態(tài)不可能只會動一個地方，細(xì)節(jié)動作也可讓動畫更加細(xì)膩。

多種方式打造立體感：我們可以通過給予元素的解剖、重量、平衡和光影等技法，塑造立體的形象。其次也可以通過層次景深打造空間感。讓表情更接近真實世界的物品。但由于 Lottie 對于 3D 的支持有限，在實際制作中我們可采取一些技巧幫助制作立體感動畫：

（1）以快速運(yùn)動制造視覺假象。例如“棒棒糖”表情棒棒糖實際只轉(zhuǎn)了半圈，但由于其高速運(yùn)動，所以人眼會認(rèn)為它在轉(zhuǎn)整圈。

（2）逐點描摹 3D 運(yùn)動。3D 效果需要通過刻畫出形狀中每個面的運(yùn)動軌跡，然后追蹤每個面的運(yùn)動路線，再復(fù)制錨點組成完整動畫。為了方便描摹，設(shè)計師可使用 3D 圖層制作好 3D 效果。對于更加復(fù)雜的形狀和運(yùn)動，也可以用 3D 軟件進(jìn)行輔助。

夸張手法讓表情更好玩：夸張即采用不符合現(xiàn)實的手法來為動畫增加張力，帶來詼諧的效果。

動畫要首尾相連：QQ 表情是不斷循環(huán)播放，所以動畫的首尾循環(huán)的動畫會更加自然流暢。

制作 Lottie 動畫：靈活穿插運(yùn)用上面的設(shè)計手法，可給動畫帶來靈動的感覺。不過由于 Lottie 對于 AE 支持有限，所以在實際制作中，設(shè)計師經(jīng)常會遇到無法導(dǎo)出 Lottie，或者導(dǎo)出的動畫有 bug。對此我們總結(jié)出以下經(jīng)驗，幫你提高導(dǎo)出動畫的成功率。

功能：制作時只使用下圖中 Lottie 支持的 AE 功能

表達(dá)式：Lottie 對表達(dá)式的支持并不全面，經(jīng)常失效。可用插件將表達(dá)式烘培成關(guān)鍵幀后再導(dǎo)出

模糊：Lottie 不支持模糊功能，可嘗試使用漸變來替代模糊效果。

未來

QQ 黃臉表情一直走在國內(nèi)社交平臺表情的前列。過去我們一直在思考如何跟進(jìn)潮流，創(chuàng)作出更符合當(dāng)代用戶語境的表情內(nèi)容。現(xiàn)在，我們更加希望通過新技術(shù)和新設(shè)計手法，將表情的品質(zhì)提升到一個新高度，帶給用戶更加有趣真實的社交體驗。本次上新的 Lottie 超清表情只是表情品質(zhì)提升的第一步。在這次的表情探索中，我們也感受到此類表情制作中的巨大人力成本。對此我們正在優(yōu)化相關(guān)的設(shè)計工具，來降低降低 Lottie 表情的制作成本，讓高品質(zhì)的表情內(nèi)容普及到更多的產(chǎn)品設(shè)計團(tuán)隊，讓更多用戶享受到超清表情。畢竟，有誰能拒絕 Q 彈的表情呢~

歡迎關(guān)注作者微信公眾號：「騰訊ISUX」