「JSON」檔案格式介紹,利用 Lottie 做出可控式的多媒體互動式動畫

Lottie-動畫檔-FB-1200-630-2020-05

Lottie 是一個開放源碼的函式庫工具,所以我們都可以從 Github 下載代碼與簡單的專案與一些範例動畫檔,我們可以從設計師拿到副檔名為 JSON 的動畫資料,放置到有支援 Lottie 的網站、App、Xcode 等等…Lottie 就會讀取 JSON 格式的動畫資料,之後就可以透過簡單的設定,修改播放速度、循環、背景顏色、甚至可以加入其他動態效果,此外檔案格式非常的輕巧,放大縮小也不失真喔。

Lottie 可以應用在什麼地方

這些動態效果,除了應用在網站上,還可以套用到手機 App 的互動介面上,就像你現在所看到的這些動態圖。

我要如何製作出 JSON 動畫檔

如果要製作出 JSON 動畫檔案,可用 Adobe After Effects 軟體,經由一個 名為 Bodymovin 的擴充功能輸出成一個 JSON格式,這樣就能透過 Lottie 讀取這個 JSON 檔案的動畫資料,呈現出動畫模式。

哪裡找得到 Lottie 動畫的JSON檔

自從 Lottie 專案開始後,許多設計師們將自己設計的動畫物件,免費開放給大眾下載,隨著使用的人越多,提高普及度,支援的平台也就越來越多,免費的可以在這個網站「Lottie Files」找到,若想要獨一無二的素材,可以在「MotionElements」付費購買,記得用月租圖庫吃到飽方案比較划算喔。

如果想要學習製作這種動態圖,也可以上網學習,網路有非常多這類型的線上課程可以學習,像是「從 0 開始學 AE|動態設計基礎」,有興趣的話也可以自己摸索製作。

 

又到了介介發廢文的時間

小香瓜:等不及禮拜四睡午覺了!

蘿蔔:為什麼?

小香瓜:因為老師要開會,我們就可以一直講話了

蘿蔔:…

 


李介介

身為名子有個介字的男人,介紹好東西給大家,也是非常合乎邏輯的一件事啊,熱愛設計與科技,但有人問我為什麼叫李介介,不叫介介介,難道你不知道三個介放在一起會被消除嗎?(⊙◞౪◟⊙) FacebookInstagramTelegram

發表迴響

下面還有更多有趣的文章喔