Ich wurde vom Charakterauswahlbildschirm von Valorant inspiriert, um diesen Enthüllungseffekt zu erzielen. Klicken Sie auf die Charakterporträts oder verwenden Sie Ihre Pfeiltasten, um zu interagieren!
Um diesen Effekt zu erzielen, verwenden wir AnimeJS für die Bildanimationen und Granim.js für die Hintergrundverlaufsübergänge
Wir verwenden insgesamt drei Bilder: den PNG-Ausschnitt der Hauptfigur und zwei farbige Overlay-Versionen. Einer dieser farbigen Ausschnitte bleibt hinter dem Hauptbild zurück und der andere schießt nur leicht nach vorne, wodurch dieser federnde Effekt entsteht. Der Hintergrund ist nur ein Canvas-Element, auf das Granim.js abzielt.
Zuerst erstellen wir einen Ereignis-Listener, der das Bild unseres Agenten verschiebt, wenn wir die rechte Pfeiltaste drücken:
document.addEventListener("keydown", function (event) { if (event.key === "ArrowRight") { animationRight(); } });
Innerhalb unserer Funktion „animationRight()“ werden wir AnimeJS verwenden, um auf den Stapelcontainer mit drei Bildern unseres Agenten zu zielen und ihn vonvon rechts nach links:
zu verschieben
anime({ targets: ".agent-container", translateX: [ "250px", // Initial state "0px" // Final state ], easing: "easeOutCubic", duration: 250 });
Danach zielen wir auf die Farbe ab, hinter der wir zurückbleiben möchten, und animieren sie. Denken Sie daran, dass alle Bilder „position: absolute“ und „transform: translatorX(-50 %)“ haben, um gestapelt und zentriert zu werden. Daher sollte ihr endgültiger „translateX“-Wert -50 % und nicht 0 sein. Da wir uns vonnach rechts bewegen links, das bedeutet, dass das Bild bei einem größeren Wert als -50 % beginnen muss.
Man kann mit der Lockerung herumspielen, aber ich finde es am besten, zu verhindern, dass dieser erste Tracer herumspringt; Ansonsten sieht die Animation etwas chaotisch aus. Wir werden den anderen Leuchtmarker verwenden, um den „Rückstoß“ zu verkaufen. In beiden Fällen verwenden wir die unglaubliche Spring()-Beschleunigung von AnimeJS, die es einfach macht, „gewichtige“ Ergebnisse zu erzielen.
anime({ targets: ".agent-fb-B", translateX: [ "-32%", // Initial state "-50%" // Final state ], easing: "spring(1, 100, 40, 0)", duration: 100 });
Um das Ganze abzurunden, machen wir das Gleiche mit dem anderen Bild, aber wir machen es „schneller“ als das Hauptbild, bevor es an die gleiche Position gelangt, was ihm ein „zuckendes“ Gefühl verleiht:
anime({ targets: ".agent-fb-S", translateX: [ "-46%", // Initial state "-50%" // Final state ], easing: "spring(1, 100, 10, 20)", duration: 150 });
Mit Granim.js können Sie einen hübschen Verlaufshintergrund einrichten, der die Verlaufsübergänge oder alle Animationen verarbeitet, die Sie für Ihren Hintergrund verwenden möchten
var granimInstance = new Granim({ element: '#canvas-interactive', direction: 'diagonal', states : { "default-state": { gradients: [ ['#B3FFAB', '#12FFF7'], ] }, ... } });
Grundsätzlich müssen Sie nur verschiedene „Zustände“ definieren und wenn Sie die Farben ändern möchten (z. B. bei der Auswahl eines neuen Agenten), müssen Sie nur granimInstance.changeState('new-state'); aufrufen. und das ist es!
Das obige ist der detaillierte Inhalt vonValorant-Charakterauswahl: Charakter-Enthüllungseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
