我的靈感來自《Valorant》的角色選擇螢幕，創造了這種揭示效果。點選人物頭像或使用方向鍵進行互動！

設定

為了實現這種效果，我們將使用 AnimeJS 進行圖像動畫，使用 Granim.js 進行背景漸變過渡

我們總共使用了三張圖像：主角 PNG 剪切圖和兩個彩色疊加版本。這些彩色剪貼畫中的一個將落後於主圖像，而另一個將稍微向前拍攝，從而為我們帶來這種彈性效果。背景只是 Granim.js 將定位的畫布元素。

入門

首先，我們將建立一個事件偵聽器，當我們按下右箭頭鍵時，它將移動代理程式的圖像：

document.addEventListener("keydown", function (event) {
  if (event.key === "ArrowRight") {
    animationRight();
  }
});

在我們的animationRight()函數中，我們將使用AnimeJS來定位代理的三圖像堆疊容器並將其從從右移動到左:

anime({
        targets: ".agent-container",
        translateX: [
          "250px", // Initial state
          "0px" // Final state
        ],
        easing: "easeOutCubic",
        duration: 250
      });

之後，我們瞄準我們想要落後的顏色並為其設定動畫。請記住，所有圖像都具有position:absolute和transform:translateX(-50%)以便堆疊和居中，因此它們的最終translateX值應該是-50%，而不是0。因為我們從[移動&&&]從右到左，這意味著圖像必須以大於-50%的值開始。

你可以搞亂緩動，但我發現最好保持第一個跟踪器不彈跳；否則，動畫看起來有點混亂。我們將使用另一個示踪劑來出售“後座力”。在這兩種情況下，我們都使用 AnimeJS 令人難以置信的 spring() 緩動，這使得很容易實現「重量級」結果。

日本動畫片（{ 目標：“.agent-fb-B”， 翻譯X：[ "-32%", // 初始狀態 "-50%" // 最終狀態 ], 緩動: "彈簧(1, 100, 40, 0)", 持續時間：100 });

      anime({
        targets: ".agent-fb-B",
        translateX: [
          "-32%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 40, 0)",
        duration: 100
      });

為了完成它，我們對另一個圖像做同樣的事情，但在到達相同位置之前我們讓它比主圖像“更快”，給它一種“後座力”的感覺：

日本動畫片（{ 目標：“.agent-fb-S”， 翻譯X：[ "-46%", // 初始狀態 "-50%" // 最終狀態 ], 緩動: "彈簧(1, 100, 10, 20)", 持續時間：150 });

      anime({
        targets: ".agent-fb-B",
        translateX: [
          "-32%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 40, 0)",
        duration: 100
      });

漸變！

使用 Granim.js，您可以設定一個簡潔的漸變背景，它將處理漸變過渡或您想要用於背景的任何動畫

var granimInstance = new Granim({ 元素：'#canvas-interactive'， 方向：'對角線'， 狀態 ： { “預設狀態”：{ 梯度：[ ['#B3FFAB', '#12FFF7'], ] }, … } });

      anime({
        targets: ".agent-fb-B",
        translateX: [
          "-32%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 40, 0)",
        duration: 100
      });

基本上，您需要的只是定義不同的“狀態”，當您想要更改顏色時（例如選擇新代理時），您只需調用 granimInstance.changeState('new-state');就是這樣！