亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

Lottie是一種新的開發(fā)動畫的方式. 學(xué)會使用Lottie,會極大改善你和開發(fā)小哥哥撕逼的情況, 因為動畫我們都給做好了他只需要給播放一下就好了!! 下面的效果可以輕松實現(xiàn).

官網(wǎng)地址：https://airbnb.design/lottie/

Lottie的優(yōu)勢

1. 開發(fā)無需編寫動畫,只需加載

2. Android, iOS, 和React Native多平臺支持

3. Path,flat等風格動畫實現(xiàn)完美

4. 可手動設(shè)置進度,綁定手勢,事件等

5. 可網(wǎng)絡(luò)加載,動態(tài)控制播放速度等

6. 性能好,顯示效果完

...

Lottie的劣勢

1. 能在AE中實現(xiàn)的效果非常有限

2. 對AE使用要求高一點, 動畫更加依賴設(shè)計師

3. 使用位圖后,資源消耗大

...

了解Lottie的應(yīng)用范圍

首先我們得知道Lottie的邊界在哪里,是否采用這個方案,制作的動畫能不能完美實現(xiàn),那么我們必須從文檔開始

1. 對Android和iOS的支持范圍(這和我們的產(chǎn)品要覆蓋的用戶群體息息相關(guān))

1)  Lottie支持API 16及以上版本(也就是Android版本至少得是4.1 Jelly Bean糖豆)

2)  Lottie支持iOS 8+

2. 了解支持的AE特性(**我大概總結(jié)下)**

1)  基本的形狀都支持.填充支持漸變,

2)  mask 大部分混合效果不支持(少用mask,影響性能)

3)  Mattes 用alpha matte就好(少用,影響性能)

4)  merge Path(合并路徑) 也盡量避免使用,應(yīng)用Android只支持4.4以上,iOS都不支持.

5)  圖層效果和效果等都幾乎不支持哦

6)  文字最好在轉(zhuǎn)動畫前就轉(zhuǎn)為形狀(因為iOS不支持)

7)  表達式不支持

8)  預(yù)合成現(xiàn)在已經(jīng)支持

...

從AE開始

1. 安裝必備的工具

After Effects(盡量選擇17以后的版本)

原版Bodymovin(如何安裝插件網(wǎng)上已經(jīng)很多,只是老版本AE和新版AE安裝方式有些區(qū)別,這個插件價格你自己定,填0就是免費!!!),這里同時有個漢化版本的漢化版Bodymovin

下載 Lottiefiles preview app(這個Android版本的app功能要更強大一些)

2. 安裝bodymovin插件

插件下載地址已經(jīng)在上面提到了,選擇哪個版本看你,我一般都選新的. 下載下來格式是后綴為.zxp的文件,這里我們需要安裝一個Adobe官方的插件管理工具 ZXP Installer進行安裝, 這個很簡單,但是不知道我安裝后無法識別到我電腦上的ae軟件.

Mac OS上安裝

1.將.zxp文件重命名為.zip

2. 解壓縮zip文件

3. 在Finder(訪達)中 使用快捷鍵 ?+shift+G,輸入 ~/Library/Application Support/Adobe/CEP/extensions 到達相應(yīng)文件夾

4. 將剛剛的解壓的文件移入這個文件夾

Windows上安裝

1. 將.zxp文件重命名為.zip

2. 解壓縮zip文件

3. 將解壓文件夾拖入 C:/Program Files(x86)/Common Files/Adobe/CEP/extensions/

4. 在HKEY_CURRENT_USER/Software/Adobe/CSXS.5中創(chuàng)建一個注冊表項“PlayerDebugMode”，其字符串值為1（要創(chuàng)建和修改注冊表項，您可以在Windows菜單中搜索“regedit”程序）

3. 這個是我制作的一個AE動畫 

可以看到我基本是用的AE的五大屬性(位置,縮放,旋轉(zhuǎn),透明度,錨點)以及修剪路徑,和路徑做的動畫,因為我看了Lottie的文檔知道這樣去做最為安全

4. 表達式轉(zhuǎn)為關(guān)鍵幀

剛剛截圖也發(fā)現(xiàn),我有用表達式. Lottie本身不支持表達式的. 但是一些微動效果(比如抖動這類),我們用表達式做出來更方便,效果更好.這里有個插件能將表達式烘焙轉(zhuǎn)為關(guān)鍵幀,那么也就解決我們的問題了.

下載表達式烘焙插件 Easy Bak

將下載文件夾中的Easy Bake.jsxbin文件移入/Applications/Adobe After Effects CC 2018/Scripts/ScriptUI Panels中,然后打開AE-首選項-常規(guī)-允許腳本寫入文件和訪問網(wǎng)絡(luò).這樣你的插件才可以正常工作.  

安裝的插件會出現(xiàn)在紅色的位置

打開你的AE文件中的合成, 點擊Bake(其它不用調(diào)節(jié)), 完成可以看到,所以表達式都被關(guān)閉,替代他們的是排列緊密的關(guān)鍵幀.關(guān)鍵這個插件還可以Unbake,點擊就可還原表達式,屌不屌!!!

5. 導(dǎo)出Lottie需要的json文件

這里我們的動畫部分都基本完成了, 整個動畫是圖標變換

這里需要使用到第二個工具 bodymovin,這里我用漢化版(前面有提到下載地址)來說明:

選擇要導(dǎo)出的合成,進入設(shè)置

這個漢化版已經(jīng)說明了每個選項的作用了, 按照我之前聽過一個大佬說過,軟件如果有默認選項,那么選默認總是沒錯的. 這里我們之間選擇默認的第二個,其它只是特殊需求情況下需要改選的.

點擊渲染, 這里我保存在桌面, 出現(xiàn)了一個后綴.json的文件

不要關(guān)閉軟件,我們先預(yù)覽看看,依舊使用這個插件,旁邊的 預(yù)覽按鈕

拖動下面的按鈕,查看真?zhèn)€幀率下,顯示是否正常.

最好利用官網(wǎng)的預(yù)覽功能再次查看(因為涉及到平臺,你得在iOS和Android下查看),打開Lottiefile 進行預(yù)覽

之后用你的手機,掃描右邊的二維碼進行預(yù)覽(商店搜索Lottie Preview,分別用Android和iOS進行測試),如果動畫有問題,繼續(xù)回去看看AE用了什么不支持的屬性,然后調(diào)整輸出,重新導(dǎo)出,再次檢測.

到這里,整個Lottie的動畫導(dǎo)出就結(jié)束了.接下來只要將你的json文件交付給開發(fā)小哥哥就好了, 他們會在代碼中添加Lottie庫來加載我們制作的動畫.下圖是本人用framer實現(xiàn)的實際原型效果(后面可能會出相關(guān)教程哦) 

需要的插件,   在公眾號回復(fù)  Lottie插件  即可下載

更多設(shè)計干貨與資訊, 盡在海華社Hiwow, 不關(guān)注血虧。