この公開エフェクトを作成するにあたり、Valorant のキャラクター選択画面からインスピレーションを受けました。キャラクターのポートレートをクリックするか、矢印キーを使用して操作してください!

セットアップ

この効果を実現するには、画像アニメーションに AnimeJS を使用し、背景のグラデーション トランジションに Granim.js を使用します

主人公の PNG カットアウトと 2 色のオーバーレイ バージョンの合計 3 つの画像を使用しています。これらの色付きのカットアウトの 1 つはメイン画像よりも遅れ、もう 1 つはわずかに前方に発射され、この弾力のある効果が得られます。背景は、Granim.js がターゲットとする単なるキャンバス要素です。

はじめる

まず、右矢印キーを押したときにエージェントの画像を移動するイベント リスナーを作成します。

document.addEventListener("keydown", function (event) {
  if (event.key === "ArrowRight") {
    animationRight();
  }
});

animationRight() 関数内で、AnimeJS を使用してエージェントの 3 つの画像スタック コンテナをターゲットにし、それを 右から左へ:
に移動します。

anime({
        targets: ".agent-container",
        translateX: [
          "250px", // Initial state
          "0px" // Final state
        ],
        easing: "easeOutCubic",
        duration: 250
      });

その後、遅れさせたい色をターゲットにしてアニメーションさせます。スタックして中央に配置するには、すべての画像に位置: 絶対値と変換: トランスレートX(-50%) があることに注意してください。そのため、最終的な平行移動X 値は 0 ではなく -50% である必要があります。 [ から移動しているため、 &&&]右から左、これは、画像が -50% より大きな値で開始する必要があることを意味します。

イージングをいじることもできますが、この最初のトレーサーが跳ね返らないようにするのが最善だと思います。そうしないと、アニメーションが少し乱雑に見えます。他のトレーサーを使って「反動」を売ります。どちらの場合も、AnimeJS の驚異的な spring() イージングを使用しているため、「重い」結果を簡単に達成できます。

アニメ（{ ターゲット: ".agent-fb-B", 翻訳X: [ "-32%", // 初期状態 "-50%" // 最終状態 ]、 イージング: "spring(1, 100, 40, 0)", 持続時間: 100 });

      anime({
        targets: ".agent-fb-B",
        translateX: [
          "-32%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 40, 0)",
        duration: 100
      });

仕上げに、他の画像にも同じことを行いますが、同じ位置に来る前にメイン画像よりも「速く」移動させ、「反動」感を与えます:

アニメ（{ ターゲット: ".agent-fb-S", 翻訳X: [ "-46%", // 初期状態 "-50%" // 最終状態 ]、 イージング: "spring(1, 100, 10, 20)", 持続時間: 150 });

      anime({
        targets: ".agent-fb-B",
        translateX: [
          "-32%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 40, 0)",
        duration: 100
      });

グラデーション！

Granim.js を使用すると、きれいなグラデーション背景を設定でき、背景に使用するグラデーション トランジションやアニメーションを処理できます

var granimInstance = 新しい Granim({ 要素: '#canvas-interactive', 方向: '対角'、 状態: { "デフォルト状態": { グラデーション: [ ['#B3FFAB'、'#12FFF7']、 ] }、 ... } });

      anime({
        targets: ".agent-fb-B",
        translateX: [
          "-32%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 40, 0)",
        duration: 100
      });

基本的に必要なのは、さまざまな「状態」を定義することだけであり、色を変更したいとき（たとえば、新しいエージェントを選択するとき）は、granimInstance.changeState('new-state'); を呼び出すだけです。以上です！