《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中文网其他相关文章！