Studio 編輯器:建立自訂點擊或游標停留互動
新增互動,讓訪客點擊元件或將游標停留在元件上時產生動畫體驗。互動可以套用動畫至觸發互動的元件,或頁面上的任何其他元件。
自訂互動讓您可以充分發揮創意,從零開始設計動畫。還可控制動畫的播放時機,讓動畫真正發揮效果。
前往 Wix Studio 學院,探索更多 Wix Studio 線上講座、教學和課程。
步驟 1|新增觸發條件(點擊或游標停留)
若要開始,請選擇觸發互動的元件。訪客將游標停留在此元件上或點擊元件後,就會看到動畫。接著,前往檢驗器面板新增互動。
提示:
您可為一個元件新增多個互動,讓元件在游標停留或點擊時觸發不同動畫。
新增觸發條件:
- 選擇要觸發互動的元件。
- 點擊編輯器右上方的「開啟檢驗器」圖示
。

- 點擊「動畫與效果」索引標籤
。 - 選擇「游標停留」/「點擊」。
- 點擊「+新增」。

步驟 2|設定互動
現在可以選擇要套用動畫的元件、要顯示的動畫,以及游標停留或點擊時要執行的確切操作(例如套用動畫、切換開啟/關閉等)。
設定互動:
- (在「設定」面板中)從「浮動時」/「點擊時」下拉式選單選擇選項:
- 開始動畫:點擊元件/將滑鼠游標移至元件上,即可觸發所選動畫。
- 切換開啟/關閉:效果類似切換開關;點擊元件會觸發動畫,再次點擊則會移除動畫。
- 重設動畫:點擊元件/將滑鼠游標移至元件上,即可移除先前套用的所有動畫。
- 從「動畫元件」下拉式選單選擇選項:
- 讓元件觸發本身的動畫:點擊元件名稱(旁邊會顯示 (本身))。
- 讓頁面上的其他元件顯示動畫: 從下拉式選單選擇元件,或點擊「在畫布上選擇」,直接在頁面上選取。
提示:按住 Cmd/Ctrl 鍵即可選擇子元件。
- 點擊「自訂」索引標籤。
- 點擊「建立自訂動畫」。
提示:
系統會儲存建立的自訂動畫,方便日後套用至其他元件。

步驟 3|自訂動畫
現在可從頭開始建立動畫。新增各種版面配置和設計轉換,變更元件的大小(縮放)、位置(位移)、角度(旋轉)、填滿色彩等。
您也可以設計元件的初始狀態,與建立的動畫互相搭配。這是元件載入後、訪客與其互動前的顯示方式。最後,設定動畫的持續時間和緩動效果,即可完成動畫。
若要自訂動畫:
- 選擇自訂動畫的方式:
調整元件設計
設計元件的初始狀態
設定動畫的持續時間和緩動效果
2. (選填)點擊浮動列上的
播放,即可預覽動畫。
播放,即可預覽動畫。 3. 準備就緒後,點擊「完成」。

提示:
將元件設為點擊或浮動時顯示後,該元件會在畫布上顯示棋盤格覆蓋層,表示元件一開始為透明。
可隨時關閉此標示。點擊「Wix Studio」圖示
,將滑鼠游標移至「查看」,然後點擊「透明元件」。
,將滑鼠游標移至「查看」,然後點擊「透明元件」。 常見問題
點擊下方即可深入了解如何建立互動。
元件觸發自身動畫時會呈現什麼效果?
不同元件之間的互動會呈現什麼效果?
一個元件可以觸發多個其他元件嗎?
單一元件可以有多個動畫嗎?
如何移除元件的點擊或浮動互動?




。