動作

具有過渡的狀態之間的平滑動畫

動作有助於在不同的動畫之間建立無縫的動畫 狀況 一個元素的。使用者可以個性化持續時間和緩動風格,以打造獨特的轉變。一種普遍的情況是對元素上的懸停條件進行最佳化更改,以確保懸停時逐漸發生變化。

在本次講座中:

  1. 設計按鈕的懸停條件
  2. 創建一個過渡以優化懸停時的動畫

設計按鈕的懸停條件

  1. 選擇一個按鈕
  2. 包括一個 盒子陰影 並對其進行精煉以達到所需的外觀
  3. 導航至 徘徊 狀態
  4. 提升陰影的深度及其距離
  5. 恢復到 沒有任何 地位

創建一個過渡以優化懸停時的動畫

  1. 整合一個 過渡 並選擇 盒子陰影 從屬性下拉清單中
  2. 添加 500ms 的持續時間
  3. 維持目前寬鬆政策
  4. 將滑鼠懸停在按鈕上時,可以看到陰影強度和距離的平滑變化
第一步,按一下左側「過渡效果」行中的加號圖示。右側第二步,從屬性下拉選單的背景部分中選擇 Box Shadow 屬性。
第三步,將持續時間改為 500 MS。
帶有文字“聯絡我們!”的藍色按鈕顯示兩次。左側,按鈕處於正常狀態。右側,按鈕處於懸停狀態,其後方有一個框陰影。

進一步了解運動和其他影響。

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