我的灵感来自《Valorant》的角色选择屏幕，创造了这种揭示效果。点击人物头像或使用方向键进行互动！
为了实现这种效果，我们将使用 AnimeJS 进行图像动画，使用 Granim.js 进行背景渐变过渡
我们总共使用了三张图像：主角 PNG 剪切图和两个彩色叠加版本。这些彩色剪贴画中的一个将落后于主图像，而另一个将稍微向前拍摄，从而给我们带来这种弹性效果。背景只是 Granim.js 将定位的画布元素。
首先，我们将创建一个事件监听器，当我们按下右箭头键时，它将移动代理的图像：
在我们的animationRight()函数中，我们将使用AnimeJS来定位代理的三图像堆栈容器并将其从从右移动到左:
之后，我们瞄准我们想要落后的颜色并为其设置动画。请记住，所有图像都具有position:absolute和transform:translateX(-50%)以便堆叠和居中，因此它们的最终translateX值应该是-50%，而不是0。因为我们从右移动到left，这意味着图像必须以大于 -50% 的值开始。
你可以随意调整缓动，但我发现最好不要让第一个跟踪器来回跳动；否则，动画看起来有点混乱。我们将使用另一个示踪剂来出售“后坐力”。在这两种情况下，我们都使用 AnimeJS 令人难以置信的 spring() 缓动，这使得很容易实现“重量级”结果。
为了完成它，我们对另一张图像做同样的事情，但在到达相同位置之前我们让它比主图像“更快”，给它一种“后坐力”的感觉：
使用 Granim.js，您可以设置一个简洁的渐变背景，它将处理渐变过渡或任何您想要用于背景的动画
基本上，您需要的只是定义不同的“状态”，当您想要更改颜色时（例如选择新代理时），您只需调用 granimInstance.changeState('new-state');就是这样！
以上是《Valorant》角色选择角色显示效果的详细内容。更多信息请关注PHP中文网其他相关文章！
