Valorantキャラクター選択キャラクター公開効果

私は 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() イージングを使用しているため、「重い」結果を簡単に達成できます。

      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
      });

グラデーション！

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

var granimInstance = new Granim({
    element: '#canvas-interactive',
    direction: 'diagonal',
    states : {
        "default-state": {
            gradients: [
                ['#B3FFAB', '#12FFF7'],
            ]
        },
        ...
    }
});

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

以上がValorantキャラクター選択キャラクター公開効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。