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

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

セットアップ

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

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

はじめる

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

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

、これは、画像が -50% よりも大きな値で開始する必要があることを意味します。 イージングをいじることもできますが、この最初のトレーサーが跳ね返らないようにするのが最善だと思います。そうしないと、アニメーションが少し乱雑に見えます。他のトレーサーを使って「反動」を売ります。どちらのインスタンスでも、AnimeJS の驚異的な spring() イージングを使用しているため、「重い」結果を簡単に達成できます。

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

グラデーション！

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

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