跳至主要內容
3.3 可控向量動畫

學習如何置入Lottie的可控向量動畫元件

BRICKS TOOLS avatar
作者:BRICKS TOOLS
3 年前已更新

歡迎使用 BRICKS ,此教學涵蓋基礎 Brick 的第三步 : 可控向量動畫,只要完成此章節內容,即可輕鬆學會 BRICKS 雲端智慧顯示基本 Brick 的使用。


🕐 此篇教學操作預計花費時間:2~3 分鐘

  • 步驟一『新增Lottie可控向量動畫 Brick』

    從 Main Canvas 中選擇新增一組 Lottie Brick 。

    Lottie Brick

  • 步驟二『尋找或自製一組Lottie動畫』

    Lottie 是一種向量的動畫格式,可透過自行製作(如AE)或透過 LottieFiles 的網站取得

    • 自製 Lottie 格式檔案

      Lottie 格式檔案可透過 AE 或一些第三方軟體製作,有興趣的可以搜尋 [ Create Lottie JOSN ] 或是觀看這部軟體介紹影片 或參考這篇 AE 製作 Lottie 的教學。製作完成後可將 JSON 檔案上傳至 Media 投遞箱。

    • LottieFiles 網站

      請先進入Lottie網站:https://lottiefiles.com/ ,若沒有帳號請先註冊才能選擇透過網址連結動畫,接著選擇 [ Discover ] 下的 [ Free Animations ] 來自由尋找想置入的動畫檔案,或是透過搜尋尋找。

      LottieFiles website

      或是在上方右側的搜尋列輸入想尋找的動畫,找到後點擊該動畫圖片。

      Search LottieFiles

  • 步驟三『複製Lottie動畫連結』

    在動畫詳細資訊中可找到 [ Lottie Animation URL ] ,請點擊複製連結獲得動畫檔案的雲端連結。

    Get Lottie URL link

  • 步驟四『設定 Lottie Brick 檔案』

    1. 若為自製的 Lottie JSON 格式檔案,請上傳至 Media 投遞箱後在 URI 的 Property 點擊右方的選擇 Media 檔案。

    2. 若使用 LottieFiles 網站連接時,可將 Lottie 網站上複製的連結貼到步驟一新增的 Lottie Brick 之中,並透過 [ Speed ] 的屬性變數調整控制動畫的播放速度。在調整過程中隨時可透過右上方的存檔及預覽功能觀看動畫在顯示端播放的效果。

      Setting Lottie Brick speed property

  • 步驟五『調整 Lottie Brick 大小及位置』

    由於 Lottie 動畫是屬於一種向量格式的動畫檔案,因此不論放到多大都不會失真,但數量過多或大小過大都會影響顯示端的播放效能,記得調整大小和數量後隨時存檔並於顯示設備中檢查呈現效果。

    Setting Lottie Brick width and height

  • 恭喜學會了可控向量動畫的基本概念


    恭喜你把 基礎教學 / Basics 裡的教學文件都閱讀完囉!

    若對其他進階功能還有興趣的話,

    歡迎繼續觀看 進階課程 / Advanced Topics 集錦!

    若需要任何幫助,歡迎點擊右下角的對話圖示詢問,我們會盡快回覆您的問題

是否回答了您的問題?