疫情期間,在線生活迎來爆發 ,視頻行業成了廣大網民放松娛樂和了解疫情、學習防護知識的重要平臺。

短視頻行業的日活用戶規模較平日增加 16.7%,日人均使用時長較平日增加 9.3%。長視頻成為很多網友在家消磨時間的方式。騰訊視頻獨播劇《三生三世枕上書》和芒果TV獨播劇《下一站是幸福》,更是讓平臺日活分別增加 22% 和 26%。

可以說,視頻行業的利好趨勢,基本上不受疫情影響。短期內疫情會帶來較大增幅,但是疫情過去之后還會保持自己的增長節奏。

這幾年也積累了一些關于視頻編輯和相關產品的經驗。今天來介紹一款可以將 AE(Adobe Effect)文件導出 json 格式的工具,名叫 lottie。

什么是lottie

第一次接觸它是在 3 年前,做視頻社交的時候,需要做視頻編輯功能,后來因為產品方向的變革,沒有使用成功,但第一次的接觸讓閣主認識到這個軟件的存在。

最近又在做視頻模板相關的需求,做一個可編輯的視頻模板,用戶只需要在模板填充內容,就可以使用已有的酷炫視頻資源,于是又接觸到 Lottie。

當時遇到一個什么樣的問題呢,設計師可以用 AE(Adobe Effect)設計出各種酷炫的視頻效果,但開發真的要將設計師所做的效果顯現出來并適配各個系統和各種大小的屏幕,會耗費很大的工程量,成本比較大,為了盡量縮小開發成本,于是引用了 lottie。

lottie 最大的好處,就是可以將做好的 AE 文件,直接導出 json 文件,讓開發直接運用,基本上實現了 0 成本的開發量,真是太棒了,大大減少了設計師和開發之間的溝通成本。

怎么安裝

1. 安裝Adobe Effect,最好是安裝英文版本的

lottie 是由 Airbnb 團隊研發出來的,因為是國外的公司,所以漢化版本,或多或少會出現各種兼容的問題。

但別擔心,各個設計軟件的界面長得都差不多,基本能猜到各個圖標是干什么的,以及相應的操作提示是什么意思,哪怕有一兩個單詞不認識,網上翻一下也就都懂了,界面英文不會太難。

2.下載文件并安裝

Lottie安裝文件鏈接:https://pan.baidu.com/s/1mXO3iyFkJPsUNWbonGdTiQ?提取碼:6V4g

備用下載鏈接:https://share.weiyun.com/5dFxjC8

安裝文件也是英文版本,解壓后有 2 個文件,1 個是 ZXP Installer,另一個是 bodymovin.zxp,先安裝 ZXP Installer,安裝好了之后打開,會出現如下界面。bodymovin 是設計師用的插件,lottie 是開發側要用的文件 json 文件,一般對外將兩者形成的系統稱為 lottie。

然后將 bodymovin.zxp 拖到界面去就完成了安裝。

怎么運用

1. 設置AE腳本權限

路徑為在「 AE-首選項-常規 」中勾選「允許腳本寫入文件和訪問網絡」,英文路徑就是「Adobe Effects」-「Preferences」-「Scripting&Expressions」-勾選「Allow Scripts to Write Files and Access Network」,如下圖:

2. 用 AE 做好你想要的視頻,這一步按各自的想要做的內容來

3. 導出

導出路徑為「Windows」-「Extensions」-「Bodymovin」,如下圖。

4. 選擇相應要導出的文件,以及選擇導出的路徑

5. 做好 Bodymovin 的設置,設置項如下圖

6. 點擊綠色按鈕「Render」就大功告成了

相關注意事項

如果出現如下圖的現象,插件卡在某個圖片上,導不出來,可以嘗試以下幾個方法:

在使用 bodymovin 的時候將電腦的語言系統也換成英文,如果不習慣,不用的時候再換回來中文。系統語言有時候也會影響導出的成功率,閣主用的是正版 AE 2020 會遇見語言問題,用 2017 英文版就不會,也跟 AE 軟件本身版本相關。

導出 json 的路徑如果含有空格,也可能導致不能導出,直接導出到桌面是最直接的。

太復雜的動畫可能導出會有問題,簡單的遮罩是支持的,建議不要用太復雜的邏輯做動效。

最后,總結一下,為了跟上時代的潮流,拓展自己的技能,可以嘗試下視頻相關的設計需求。而 Lottie 是其中能幫助團隊節省開發效率,讓設計師專心設計動效掌握主動權的工具。

Lottie安裝文件鏈接:https://pan.baidu.com/s/1mXO3iyFkJPsUNWbonGdTiQ 提取碼:6V4g

備用下載鏈接:https://share.weiyun.com/5dFxjC8

更多關于 Lottie 的教程:

歡迎關注作者的微信公眾號:「Sophia的玲瓏閣」

點贊 18
收藏 93
繼續閱讀相關文章

發表評論 已發布 6

還可以輸入 800 個字
 
 
載入中....
6 收藏