比阿里 良還強大!Lottie 動效設計完全指南(基礎篇) - 特级毛片www,色综合天天综合网,国产成人综合亚洲 - UISDC

比阿里 良還強大!Lottie 動效設計完全指南(基礎篇)

2019/07/15 29520評論 21

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

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

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

Lottie是什麼?

Lottie 是 Airbnb 開源的一個動畫渲染庫,同時支持 Android、iOS、React Native 平台。Lottie 支持渲染播放 AE 動畫。通過 AE 插件 bodymovie 導出 json 文件作為動畫數據,其工作流程如下︰

是不是听起來很心動?其實 Lottie 已經火了一兩年了,很多人應該也看了一些介紹。希望工作項目中經常涉及到動效設計,但是還在用老方法的同學。可以嘗試使用 Lottie 幫助動效落地,提升團隊工作效率和個人影響力。

Lottie有什麼用?

Lottie 可以應用在 UI 設計的很多場景中。以下舉出幾個常用例子。

1. 動態啟動頁

2. 動態圖標/按鈕

3. 空頁面

4. 加載/下拉刷新

5. Banner/彈框

6. 表情/禮物/動態貼紙

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

Lottie的原理是什麼?

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

Lottie 動畫的播放控制,除了常規的控制,還支持進度播放、幀播放。以一個動態按鈕的切換為例,方便大家理解。

△ 用 Swift 制作一個漂亮的漢堡按鈕過渡動畫

上圖所示為一個菜單/關閉按鈕的動態切換。

假設該按鈕動效一共10。 靄磁Ы謝環治 講糠,第一部分︰從菜單切換到關閉(1-10。 壞詼糠︰從關閉切換到菜單(10-1)。我們可以讓開發通過以下控制方式,完成我們想要的效果。

按鈕動效默認顯示第1。 說к刺 ,點擊按鈕以後開始播放動效,動效播放到第10幀的時候停止,並停在第10。 乇兆刺 。

當按鈕為關閉狀態(第10。┤,點擊按鈕以後動效從第10幀倒放到第1。 乇兆刺 ,並停在第1。 說к刺 。

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

首先動效的觸發,可以是一次交互事件,比如點擊、滑動;也可以是監听到了廣播,比如網絡異常等。

而觸發以後的動效控制也多種多樣,可以從開始播放到結束,也可以進行倒放;可以循環播放某一段動效;也可以從某一幀播放到另一。 蛘唚騁桓鍪奔淶悴Ё諾攪硪桓鍪奔淶悖桓嗟目}品絞叫枰 蠹以詮テ髦新誥。

Lottie支持的AE屬性

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

上圖為 Lottie 支持的主要 AE 屬性,此處有刪減掉部分不常用的屬性。可以打開以下鏈接查看完整版

需要注意的是文檔中雖然說支持漸變,但是會出錯,所以大家在使用矢量圖形時,請勿使用漸變效果。關于漸變效果的修復後續资讯會提到,官網以後也會修復相關問題,但是沒有確切時間。

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

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

AE插件安裝與使用

前面已經提到 Lottie 是通過 AE 插件 bodymovie 導出 json 文件作為動畫數據。接下來就為大家講解插件的安裝與使用方法。

1. 下載bodymovie插件

官方英文插件地址︰(文末提供中文漢化版下載地址和詳細安裝教程)

2. 自動安裝方法

下載zxp格式安裝器,下載地址︰,安裝成功後,雙擊步驟 1 中下載的插件即可完成安裝。

3. 手動安裝方法

如果自動安裝失敗,可嘗試手動安裝。首先修改 ZXP 文件後綴名為 ZIP,然後解壓縮文件,得到文件夾,將文件夾復制到以下目錄。

WINDOWS︰

C:\Program Files (x86)\Common Files\Adobe\CEP\extensions or

C:\AppData\Roaming\Adobe\CEP\extensions

MAC︰

/Library/Application\ Support/Adobe/CEP/extensions/bodymovin

您可以打開終端並鍵入︰

  • $ cp -R YOURUNZIPEDFOLDERPATH/extension /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

然後鍵入︰

  • $ ls /Library/Application\ Support/Adobe/CEP/extensions/bodymovin

以確保它被正確復制類型。

4. 安裝後

Windows︰轉到編輯>首選項>常規>並選中「允許腳本寫入文件和訪問網絡」。

Mac︰轉到Adobe After Effects>首選項>常規>並選中「允許腳本寫入文件和訪問網絡」。

安裝完成後即可在窗口>擴展>bodymovin(Window> Extensions> bodymovin)中找到 bodymovin 插件。

插件主界面如圖所示。在主界面可以選擇需要導出的合成、導出設置、導出文件夾,並且可以預覽動效。

每次導出時都需要進行設置。標紅區域為必選選項。字體圖形化可以將字體轉化為路徑,不勾選會因為應用的平台沒有相應字體導致文字加載出錯;勾選演示模式後會生成 html 文件,打開該文件即可預覽動效。

當含有圖片資源時可以根據需要選擇勾選對應的選項。

保存好設置後,點擊渲染即可生成動效文件給開發。當只有矢量圖層時,開發只需要使用 json 文件即可。當含有圖片文件時需要將 json 文件和圖片文件夾一並給到開發人員使用。需要注意的是不能隨意修改文件夾名稱和內部文件名。如果需要修改圖片名稱,應該同步修改 json 內部代碼。相關修改方法,後續资讯將會詳解。

動效預覽

為了測試 json 文件是否能在對應平台顯示正常,Lottie 提供了預覽平台。將導出的 json 文件上傳到網站即可預覽效果,也可以下載相應 APP 掃碼或者導入 json 文件預覽。

官方社區,可以預覽動效和查看其他設計師公開的動效案例(自己上傳的預覽動效不會被公開)︰

iOS 在 app store 搜索 Lottie 即可下載預覽軟件,安卓需要在 google play 下載安裝。考慮到部分朋友無法使用 google play, 文末提供下載。

推動落地

相信大家看完都有躍躍欲試的想法。但是要實際應用在工作項目中就需要各位設計師去推動了。其中可能會面臨一些阻力,比如開發人員的能力水平以及個人的溝通方式等等問題。但是對于正確的事,只要我們堅持去做就會有結果的。首先對于 gif 動畫而言,Lottie 更加輕量,且性能更好,並且不易失真;對于開發人員自己寫動效來說,一方面 Lottie 減少了大量動效標注的時間,並且可以 100% 還原動效,對于開發人員來說無需再手動寫動效了。一次部署,終身輕松。相信相關人員了解以後都會去支持的。

為了方便開發人員使用,下面列出幾個使用網站,如果開發人員不知道如何部署和控制動效,直接把鏈接扔給他們就行了。

  • Lottie官方介紹和開發文檔︰
  • York_的lottie介紹和動效控制方法詳解︰

下載鏈接

文件下載鏈接︰密碼︰iuaruk

備用下載鏈接︰

關于 Lottie 的介紹就到這里,後續將會持續更新 Lottie 動效設計過程中涉及的各種問題和方法技巧。

歡迎關注作者的微信公眾號︰「懿凡設計」

儒墨堂大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址︰http://www.rumotanartist.com/lottie-dynamic-design-guide

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

版式設計 交互設計師 界面設計 排版布局 職場 設計師干貨 儒墨堂專訪 儒墨堂大課堂 設計達人 配色 視覺設計 web前端開發 素材下載 AI教程 設計流程 設計理論 神器下載 字體下載 設計師專訪 psd下載 設計規範 用戶體驗設計 海報設計 平面設計 設計趨勢 動效設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

儒墨堂啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!特级毛片www,色综合天天综合网,国产成人综合亚洲是極具人氣的設計師平台
2012年成立至今,一直專注于設計師的學習成長交流

特级毛片www|色综合天天综合网|国产成人综合亚洲

打開微信,掃碼分享
學設計 特级毛片www,色综合天天综合网,国产成人综合亚洲 在這里