# 網頁加載動畫

1. 將Lottie動畫添加到項目中
2. 設置觸發器
3. 配置動畫的消失

## 將Lottie動畫添加到項目中

從左邊的工具欄上點擊資產面板上的照片圖標，將動畫拖到頁面的頂部。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F7MzxC63lBwVvO7Mc1iHn%2Fimage.png?alt=media\&token=bc7f1c3c-bc35-43c1-8fd7-64cbb095a3d2)

在Lottie動畫設置彈出窗口中勾選Loop(循環播放)。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FQOgJ9vhWfkFPOXDEBxPc%2Fimage.png?alt=media\&token=07110ee8-62be-4c04-8a14-349ccf8bb063)

關閉設置，在右邊的風格面板上，從位置旁邊的下拉菜單中選擇固定。這將控制動畫在屏幕上的位置。

設定100%的寬度和高度。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F8fEX4VzSvDiJd9mkjHIH%2Fimage.png?alt=media\&token=5951f635-cdb1-4496-a0ed-574f1634682c)

在Position（位置）下，將z-index（堆疊順序）設定成高數字（例如9999），確保動畫總是在最上層。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FraLl13vZcgpEHVIATxD0%2Fimage.png?alt=media\&token=d82227c1-af4e-4e2b-bd46-064efc46950f)

如果動畫背景為透明的，可以添加背景顏色。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F6SaSf6e3kkDXejuSjbDg%2Fimage.png?alt=media\&token=0d069de5-1a21-4144-ad9b-48e35bd0a39b)

## 設置觸發器

在互動面板上，點擊頁面觸發器旁邊的加號，從下拉選單中選擇Page load(頁面加載)。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FdcNxx4yyBbblvvXQUHFy%2Fimage.png?alt=media\&token=3d268467-e7f1-4af7-910c-a7875a85ffc2)

當頁面完成加載時，從動作選單中選擇啟動動畫。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FmxCR5CsbZEtmzgOXfazO%2Fimage.png?alt=media\&token=1a534a3d-836e-4a8e-8e22-361433d7aebb)

點擊定時動畫旁邊的加號，並為動畫命名（頁面加載）。

## 配置動畫的消失

在交互面板上點擊定時動作旁邊的加號，從下拉菜單中選擇隱藏/顯示。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fx4BRAlyEz1Ag0fDl75XT%2Fimage.png?alt=media\&token=a03f1dd8-a718-41b1-bb88-15751efe576d)

 在隱藏/顯示下，將顯示設置為無。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FDxxjCV01Crn9fmtFOKda%2Fimage.png?alt=media\&token=093e9160-094a-4de0-a71e-4bcea5b34be6)

在定時動作下，點擊時間線中的0.00秒，從下拉菜單中選擇不透明度。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FmOa3DHwr1tHLGvV1BBim%2Fimage.png?alt=media\&token=48799dc0-fc16-4254-8028-8411fa3226af)

將不透明度滾動到0，持續時間滾動到1.5秒來淡化動畫。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FMoSqLS1ZAe5Ipu1qCCXz%2Fimage.png?alt=media\&token=0eb1d896-18e3-4075-879e-10b7d13a2d81)

在時間動作下，點擊時間線中1.5秒的Lottie動畫，在隱藏/顯示下，將其顯示設置為無。

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F1wMJGb8gtqdy1UPCjcg4%2Fimage.png?alt=media\&token=b6ec956e-58c1-44cd-b1f1-2fc15bbbf576)

在預覽模式下檢查--調整數值與動畫，使其正好適合頁面。