《Valorant》角色選擇角色顯示效果

我的靈感來自《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() 緩動，這使得很容易實現「重量級」結果。

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

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

  anime({
        targets: ".agent-fb-S",
        translateX: [
          "-46%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 10, 20)",
        duration: 150
      });

漸變！

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

var granimInstance = new Granim({
    element: '#canvas-interactive',
    direction: 'diagonal',
    states : {
        "default-state": {
            gradients: [
                ['#B3FFAB', '#12FFF7'],
            ]
        },
        ...
    }
});

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

以上是《Valorant》角色選擇角色顯示效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！