將Lottie動畫添加到項目中
設置觸發器
配置動畫的消失
從左邊的工具欄上點擊資產面板上的照片圖標,將動畫拖到頁面的頂部。
在Lottie動畫設置彈出窗口中勾選Loop(循環播放)。
關閉設置,在右邊的風格面板上,從位置旁邊的下拉菜單中選擇固定。這將控制動畫在屏幕上的位置。
設定100%的寬度和高度。
在Position(位置)下,將z-index(堆疊順序)設定成高數字(例如9999),確保動畫總是在最上層。
如果動畫背景為透明的,可以添加背景顏色。
在互動面板上,點擊頁面觸發器旁邊的加號,從下拉選單中選擇Page load(頁面加載)。
當頁面完成加載時,從動作選單中選擇啟動動畫。
點擊定時動畫旁邊的加號,並為動畫命名(頁面加載)。
在交互面板上點擊定時動作旁邊的加號,從下拉菜單中選擇隱藏/顯示。
在隱藏/顯示下,將顯示設置為無。
在定時動作下,點擊時間線中的0.00秒,從下拉菜單中選擇不透明度。
將不透明度滾動到0,持續時間滾動到1.5秒來淡化動畫。
在時間動作下,點擊時間線中1.5秒的Lottie動畫,在隱藏/顯示下,將其顯示設置為無。
在預覽模式下檢查--調整數值與動畫,使其正好適合頁面。