提升網頁動畫體驗的不一樣選擇：使用CSS cubic-bezier曲線

在網站和應用中，動畫是讓用戶享受最佳體驗的重要組成部分之一，而所選動畫曲線對用戶感知的影響是不可忽略的。然而，開發者通常沒有對此問題足夠的認識和理解，從而通常會選擇默認的簡單動畫，浪費了一個機會，以獲取更好的用戶體驗。

一、 何為cubic-bezier曲線？

在CSS中，提供了一種曲線函數cubic-bezier（），該曲線由四個值組成，這四個值控制曲線的彎曲程度。實際上，cubic-bezier（）函數描述了一個三次貝塞爾曲線，通過兩個錨點和兩個控制點定義。錨點是曲線的起點和終點，而控制點會將曲線彎曲並確定它的形狀，因此，定義了四個值（P0，P1，P2，P3）以及兩個錨點之後即可確定cubic-bezier曲線。

  .box {
    animation: move 2s cubic-bezier(0.42,-0.25,0.99,0.67)
  }
  
  @keyframes move {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(500px);
    }
  }

二、 如何使用cubic-bezier曲線提高用戶體驗？

1、彈性動畫：要製作一種具有類似於彈簧的效果的動畫，可以調整曲線的P1和P2的值，並控制它們之間的曲線峰度。

  .box {
    animation: move 1.8s cubic-bezier(0.2, 0.84, 0.75, 1.1);
  }
  
  @keyframes move {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(200px);
    }
  }

2、自然過渡：當我們要製作視覺效果更自然的動畫時，可以使用Safari和Chrome瀏覽器的默認值，即cubic-bezier（0.25,0.1,0.25,1.0）。

  .box1 {
    animation: move1 2s cubic-bezier(0.25,0.1,0.25,1.0);
  }
  
  @keyframes move1 {
    from {
      opacity: 0;
      transform: translateY(-100px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

3、趣味性動畫：我們可以通過修改曲線的控制點，製作出具有趣味性的動畫效果， 如下例所示。

  .box2 {
    animation: move2 3s cubic-bezier(.31,1.32,.72,.27)
  }
  
  @keyframes move2 {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

三、cubic-bezier曲線的可視化工具

使用一些開源的在線工具，可輕鬆製作滿足特定動畫需要的cubic-bezier函數。

1、 Cubic-Bezier

2、 Ceaser

四、結論

cubic-bezier曲線是一個毫無疑問的有價值的工具，可以差異化選擇動畫曲線，從而增強用戶體驗。除了基礎的應用，還可以考慮通過使用開源工具獲得更高級別的優化。儘管如此，我們需要根據場景自行評估各種變體，以確保用戶的體驗和目標對話。