Lottie 動效設(shè)計

2019-12-26    純純

動效設(shè)計,是 UI 設(shè)計當(dāng)中不可或缺的一環(huán)。大家對動效的認(rèn)知也從最初認(rèn)為動效只是為了美觀酷炫,到逐漸理解了動效對于提升用戶體驗和產(chǎn)品需求的重要作用。而導(dǎo)致這種認(rèn)知的轉(zhuǎn)變,相當(dāng)一部分原因是因為硬件性能的發(fā)展和動效輸出方式的優(yōu)化。

因為動效實現(xiàn)的過程就是設(shè)計師和開發(fā)之間互相博弈的過程。設(shè)計師可能通過 AE 或者其他工具做出炫酷的效果,和開發(fā)對接就懵了。要么無法實現(xiàn),要么極其復(fù)雜。畢竟開發(fā)工程師要通過代碼把動效實現(xiàn)出來,設(shè)計師得用開發(fā)所能理解的語言來描述。就如同你能完美地解出一道數(shù)學(xué)題一樣,讓你把解題思路教給別人,你可能就沒那么順暢了。一方面取決于你的表述能力,而更重要的是對方的理解能力。過去所廣泛采用的通過動效標(biāo)注輸出給開發(fā)的方式,都存在還原度的問題。很多時候還原度達(dá)到 80% 可能都算比較好的了。

而今天要說到的 Lottie 不僅可以 100% 還原動效,而且無需動效標(biāo)注。直接通過 AE 輸出動效文件給開發(fā)。開發(fā)人員直接調(diào)用,然后完美還原。

Lottie是什么?

Lottie 是 Airbnb 開源的一個動畫渲染庫,同時支持 Android、iOS、React Native 平臺。Lottie 支持渲染播放 AE 動畫。通過 AE 插件 bodymovie 導(dǎo)出 json 文件作為動畫數(shù)據(jù)。


Lottie有什么用?

Lottie 可以應(yīng)用在 UI 設(shè)計的很多場景中。以下舉出幾個常用例子。

1. 動態(tài)啟動頁


2. 動態(tài)圖標(biāo)/按鈕

3. 空頁面




以上僅列舉了部分常用案例,其實 Lottie 的應(yīng)用場景遠(yuǎn)不止這些。在 APP 的多個模塊中都可以運(yùn)用,那么我們要如何將 Lottie 運(yùn)用在自己的工作項目中呢?那就要了解 Lottie 的原理了。


Lottie的原理是什么?

前面已經(jīng)提過 Lottie 是 Airbnb 開源的一個動畫渲染庫。我們可以理解為它是一個多功能的視頻播放器,開發(fā)人員需要將這個播放器部署到相應(yīng)的環(huán)境中。然后設(shè)計人員提供視頻(動效文件)給開發(fā)人員,讓開發(fā)人員按照要求播放視頻文件,即可完成動效的應(yīng)用。


假設(shè)該按鈕動效一共10幀,整個按鈕切換分為兩部分,第一部分:從菜單切換到關(guān)閉(1-10幀);第二部分:從關(guān)閉切換到菜單(10-1)。我們可以讓開發(fā)通過以下控制方式,完成我們想要的效果。

按鈕動效默認(rèn)顯示第1幀(菜單狀態(tài)),點擊按鈕以后開始播放動效,動效播放到第10幀的時候停止,并停在第10幀(關(guān)閉狀態(tài))。當(dāng)按鈕為關(guān)閉狀態(tài)(第10幀)時,點擊按鈕以后動效從第10幀倒放到第1幀(關(guān)閉狀態(tài)),并停在第1幀(菜單狀態(tài))。

通過以上方式就完成了對一個動效按鈕的控制。而日常工作中我們可以靈活地運(yùn)用多種控制方式。

首先動效的觸發(fā),可以是一次交互事件,比如點擊、滑動;也可以是監(jiān)聽到了廣播,比如網(wǎng)絡(luò)異常等。而觸發(fā)以后的動效控制也多種多樣,可以從開始播放到結(jié)束,也可以進(jìn)行倒放;可以循環(huán)播放某一段動效;也可以從某一幀播放到另一幀,或者某一個時間點播放到另一個時間點;更多的控制方式需要大家在工作中慢慢挖掘。

Lottie支持的AE屬性

Lottie雖然能夠滿足多種場景需要,但是并非支持所有的 AE 效果。設(shè)計制作時,需要考慮該效果是否支持。否則,會導(dǎo)致出錯或者所用效果無法生效。



上圖為 Lottie 支持的主要 AE 屬性,此處有刪減掉部分不常用的屬性??梢源蜷_以下鏈接查看完整版http://airbnb.io/lottie/#/supported-features

需要注意的是文檔中雖然說支持漸變,但是會出錯,所以大家在使用矢量圖形時,請勿使用漸變效果。關(guān)于漸變效果的修復(fù)后續(xù)文章會提到,官網(wǎng)以后也會修復(fù)相關(guān)問題,但是沒有確切時間。

通過上圖我們可以了解到,Lottie 支持的 AE 屬性基本包含以下幾類:

  • 基礎(chǔ)的形狀比如圓形、矩形、星形等,也可以支持鋼筆工具繪制的矢量形狀和從 AI 中導(dǎo)入的矢量圖形。
  • 支持位移、大小縮放、透明度、旋轉(zhuǎn)、修剪路徑、蒙版、遮罩這些基礎(chǔ)動畫屬性。
  • 支持圖層間建立父子級關(guān)系(只支持圖層與圖層之間建立,當(dāng)圖層的屬性之間建立父子關(guān)系會失效,比如 A 圖層可以和 B 圖層建立父子關(guān)系,但是 A 圖層的位移屬性和 B 圖層的位移屬性單獨(dú)建立父子關(guān)系則不生效)。
  • 支持速度貝塞爾插值,可以搭配 Flow 插件生成各種緩動效果。
  • 支持導(dǎo)入圖片。
  • 支持時間拉伸和時間重映射來通知時間和速度。

(原文章來源于:https://www.uisdc.com/lottie-dynamic-design-guide





分享本文至:

日歷

鏈接

個人資料

存檔