我的靈感來自《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
});
var granimInstance = new Granim({
element: '#canvas-interactive',
direction: 'diagonal',
states : {
"default-state": {
gradients: [
['#B3FFAB', '#12FFF7'],
]
},
...
}
});
以上是《Valorant》角色選擇角色顯示效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
