Valorant-Charakterauswahl: Charakter-Enthüllungseffekt

Ich wurde vom Charakterauswahlbildschirm von Valorant inspiriert, um diesen Enthüllungseffekt zu kreieren. Klicken Sie auf die Charakterporträts oder verwenden Sie Ihre Pfeiltasten, um zu interagieren!

Das Setup

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.

Erste Schritte

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()“ verwenden wir AnimeJS, um den Stapelcontainer mit drei Bildern unseres Agenten anzuvisieren und ihn von von 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, hinter der wir zurückbleiben möchten, und animieren sie. Beachten Sie, dass alle Bilder „position: absolute“ und „transform: translatorX(-50 %)“ haben, damit sie gestapelt und zentriert werden können. Daher sollte ihr endgültiger „translateX“-Wert -50 % und nicht 0 sein. Da wir uns von von rechts nach links, das bedeutet, dass das Bild bei einem größeren Wert als -50 % beginnen muss.

Sie können 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 dasselbe 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
      });

Farbverläufe!

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'],
            ]
        },
        ...
    }
});

Im Grunde 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!