午夜精品久久17c,免费短视频成人日韩,最新的欧美黄色

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

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

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

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

Lottie是什么？

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

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

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

Lottie有什么用？

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

1. 動態啟動頁

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

2. 動態圖標/按鈕

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

3. 空頁面

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

4. 加載/下拉刷新

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

5. Banner/彈框

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

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

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

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

Lottie的原理是什么？

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

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

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

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

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

假設該按鈕動效一共10幀，整個按鈕切換分為兩部分，第一部分：從菜單切換到關閉（1-10幀）；第二部分：從關閉切換到菜單（10-1）。我們可以讓開發通過以下控制方式，完成我們想要的效果。

按鈕動效默認顯示第1幀（菜單狀態），點擊按鈕以后開始播放動效，動效播放到第10幀的時候停止，并停在第10幀（關閉狀態）。

當按鈕為關閉狀態（第10幀）時，點擊按鈕以后動效從第10幀倒放到第1幀（關閉狀態），并停在第1幀（菜單狀態）。

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

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

而觸發以后的動效控制也多種多樣，可以從開始播放到結束，也可以進行倒放；可以循環播放某一段動效；也可以從某一幀播放到另一幀，或者某一個時間點播放到另一個時間點；更多的控制方式需要大家在工作中慢慢挖掘。

Lottie支持的AE屬性

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

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

上圖為 Lottie 支持的主要 AE 屬性，此處有刪減掉部分不常用的屬性。可以打開以下鏈接查看完整版http://airbnb.io/lottie/#/supported-features

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

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

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

AE插件安裝與使用

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

1. 下載bodymovie插件

官方英文插件地址：https://aescripts.com/bodymovin/（文末提供中文漢化版下載地址和詳細安裝教程）

2. 自動安裝方法

下載zxp格式安裝器，下載地址：https://aescripts.com/learn/zxp-installer/，安裝成功后，雙擊步驟 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 插件。

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

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

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

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

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

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

動效預覽

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

官方社區，可以預覽動效和查看其他設計師公開的動效案例（自己上傳的預覽動效不會被公開）：https://lottiefiles.com/

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

比阿里犸良還強大！Lottie 動效設計完全指南（基礎篇）

推動落地

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

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