可控式動態向量圖 Lottie | Bricks Dag, Inc. Help Center

Lottie 元件介紹

Lottie 元件主要將 LottieFile 的可設定調整的動態向量圖像載入呈現於應用程式中，可用於製作依照操作變換速度的動畫。

Lottie 元件在畫布上的呈現與 LottieFile 網站上一致，下圖呈現 LottieFile 動畫

Frame 區塊

Frame 基本屬性和 Rect 方塊元件相同，詳細可參考方塊元件 Frame 區塊解說

Properties 區塊

文字輸入框元件的 Properties 基本屬性繼承方塊元件，詳細可參考方塊元件 Properties 區塊解說。

其他屬性解說如下：

屬性名稱	屬性形態	說明
URI	字串	設定 LottieFile 提供之Lottie Animation URI。需註冊登入後找一組動畫點擊，在下方資訊處複製連結貼上。
MD5	128位元的散列值	根據 URL 自動生成的雜湊值，用於確保檔案在傳輸中的一致性及正確性
Source	JSON 格式	可直接將 Lottie 格式的 JSON 內容貼至 Source 中，在此格填寫時會取代 URL 欄位內容。提供自行製作格式的設計師可無需透過 LottieFile 網站上傳產生連結即可使用。
Speed	數值 ( 1, 1.5, 2, 2.5 )	設定動畫的播放速度，僅支援四種播放速度。
Loop	布林值	設定動畫是否循環播放。
Auto Play	布林值	設定動畫是否於載入時就自動開始播放
Resize Mode	清單	The resize methods that will be applied when the image's dimensions differ from the image brick's (the container's) dimensions. contain cover center 設定 Lottie 元件中的呈現模式，一共有以下幾種模式可選擇 `contain`: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於容器視圖的尺寸。圖片完全被包裹在圖像元件中，圖像元件中可能留有空白 `cover`: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大於等於容器視圖的尺寸。圖片完全覆蓋甚至超出圖像元件，圖像元件中不留任何空白。 `center`: 居中不拉伸。在圖片尺寸大於圖像元件情況下效果等同於 contain。
Render Mode	清單	(僅適用 Android 系統) 選擇以 hardware 或 software 加速進行渲染，auto 為自動依照最佳狀況渲染。

Properties - Border 區塊

基本邊框屬性和 Rect 方塊元件相同，詳細可參考方塊元件 Border 區塊解說

Animations 區塊

基本動畫事件屬性和 Rect 方塊元件相同，詳細可參考方塊元件 Animation 區塊解說。

其他動畫事件說明如下：

On Animation Finish	設定當動畫播放完成觸發的動畫事件
Uri On Load	設定當 URI 讀取完成時觸發的動畫事件
Uri On Load Error	設定當 URI 讀取失敗時觸發的動畫事件

Events 區塊

基本事件屬性和 Rect 方塊元件相同，詳細可參考方塊元件 Event 區塊解說。

其他事件說明如下：

On Animation Finish	設定當動畫播放完成觸發的事件
Uri On Load	設定當 URI 讀取完成時觸發的事件
Uri On Load Error	設定當 URI 讀取失敗觸發的事件

NEXT -

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

Properties - Border 區塊

Animations 區塊

Events 區塊