無極5註冊_做好直接用!動效神器 Lottie 基礎入門教學

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

短視頻行業的日活用戶規模較平日增加 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 的教程:

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

最近阿里推出的動效神器「獁良」刷屏設計圈,但是很少人知道獁良依靠的是更加強大的Lottie,用它做起動效來,簡直如虎添翼,今天這篇教你用好這個神器!

閱讀文章 >>

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

本文將以一個實際動效案例的導入流程為例,幫助大家了解高效導入設計文件的方法。

閱讀文章 >>

比阿里獁良還強大!Lottie動效設計完全指南

之前的文章已經介紹了 Lottie 是什麼,以及如何導入設計文件,那麼今天就為大家講解如何根據我們的需要導出 Lottie 文件。

閱讀文章 >>

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

未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極5註冊_做好直接用!動效神器 Lottie 基礎入門教學

赞 (0)