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

Die Einrichtung

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()“ werden wir AnimeJS verwenden, um auf den Stapelcontainer mit drei Bildern unseres Agenten zu zielen 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, um gestapelt und zentriert zu werden. Ihr endgültiger Wert für „translateX“ sollte also -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
      });

Zum Abschluss machen wir das Gleiche mit dem anderen Bild, machen es jedoch „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 ordentlichen 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 (zum Beispiel bei der Auswahl eines neuen Agenten), müssen Sie nur granimInstance.changeState('new-state'); aufrufen. und das ist es!