懸停時顯示元素

當您將滑鼠懸停在父元素上時,請使用懸停互動來顯示子元素。

利用懸停互動在懸停時顯示元素。

在本教程中:

  1. 建立懸停進入動畫
  2. 創建懸停退出動畫 
  3. 在其他元件上實現動畫

建立懸停進入的動畫

  1. 選擇您的連結區塊(作為觸發器)
  2. 在“交互”面板中,按一下“元素觸發器”旁邊的加法符號,然後從選項中選擇“滑鼠懸停”
  3. 對於懸停事件,從操作清單中選擇啟動動畫
  4. 點擊時間動畫附近的加法符號
  5. 為其命名(例如,滑入)
  6. 選擇您想要設定動畫的元件(例如,心形組件)
  7. 點選定時操作附近的加號,然後從選項中選擇 Shift
  8. 對於 Shift,為 x 軸指定一個值(例如 -100)
  9. 在「計時」旁邊,開啟「設定為初始狀態」的開關
  10. 對要設定動畫的其他元素重複步驟 6 到 9 
  11. 交互面板,(按 Shift 鍵)並選擇序列中的元件
  12. 右鍵單擊複製
  13. 對於 Shift,將 x 軸恢復為其原始值(0 像素)
  14. 對於計時,更改緩動(例如,緩出)
  15. 減少持續時間(例如,減少到 0.2 秒)

創建懸停退出動畫 

  1. 退出剛剛創建的動畫 
  2. 在“懸停時”下的“互動”面板中,從“動作”清單中選擇“啟動動畫”
  3. 在定時動畫中,點擊滑入旁邊的齒輪圖標,然後選擇複製
  4. 啟動滑入 2
  5. 重新命名(例如,優雅地滑出)
  6. 從序列中刪除複製的動畫(例如,Heart 和 H3 Price) 
  7. 選擇時間軸中剩餘的動畫
  8. 在“計時”旁邊,關閉“設定為初始狀態”
  9. 像以前一樣調整緩動和持續時間

在其他元件上實現動畫

  1. 選擇序列中的任意定時操作 
  2. 在影響旁邊選擇等級
  3. 按一下具有此類的所有元素,然後選擇僅具有此類的子元素
  4. 對懸停進入和懸停退出重複 1-3

麥伊凡
Ewan Mak 的最新帖子 (看全部)