我的灵感来自《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');就是这样！