Kesan Pendedahan Watak Pemilihan Watak Valorant

Saya telah diilhamkan oleh skrin pemilihan watak Valorant untuk mencipta kesan pendedahan ini. Klik potret watak atau gunakan kekunci anak panah anda untuk berinteraksi!

Persediaan

Untuk mencapai kesan ini, kami akan menggunakan AnimeJS untuk animasi imej dan Granim.js untuk peralihan kecerunan latar belakang

Kami menggunakan tiga imej keseluruhan: keratan PNG watak utama dan dua versi tindanan berwarna. Satu daripada potongan berwarna ini akan ketinggalan di belakang imej utama, dan satu lagi akan menangkap sedikit ke hadapan, memberikan kita kesan kenyal ini. Latar belakang hanyalah elemen kanvas yang akan disasarkan oleh Granim.js.

Bermula

Pertama, kami akan mencipta pendengar acara yang akan memindahkan imej ejen kami apabila kami menekan kekunci anak panah kanan:

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

Di dalam fungsi animationRight() kami, kami akan menggunakan AnimeJS untuk menyasarkan bekas tindanan tiga imej ejen kami dan mengalihkannya dari kanan ke kiri:

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

Selepas itu, kami menyasarkan warna yang kami mahu ketinggalan dan menghidupkannya. Perlu diingat bahawa semua imej mempunyai kedudukan: mutlak dan ubah: translateX(-50%) untuk disusun dan dipusatkan, jadi nilai translateX akhir mereka hendaklah -50%, bukan 0. Memandangkan kita beralih dari kanan ke kiri, ini bermakna imej perlu bermula pada nilai yang lebih besar daripada -50%.

Anda boleh bermain-main dengan pelonggaran, tetapi saya rasa lebih baik untuk mengekalkan pengesan pertama ini daripada melantun; jika tidak, animasi kelihatan sedikit tidak kemas. Kami akan menggunakan pengesan yang lain untuk menjual 'recoil'. Dalam kedua-dua keadaan, kami menggunakan pelonggaran musim bunga() AnimeJS yang luar biasa, yang memudahkan untuk mencapai keputusan 'berat'.

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

Untuk menyelesaikannya, kami melakukan perkara yang sama pada imej yang lain, tetapi kami menjadikannya 'lebih pantas' daripada imej utama sebelum mencapai kedudukan yang sama, memberikannya perasaan 'recoily':

  anime({
        targets: ".agent-fb-S",
        translateX: [
          "-46%", // Initial state
          "-50%" // Final state
        ],
        easing: "spring(1, 100, 10, 20)",
        duration: 150
      });

Kecerunan!

Menggunakan Granim.js, anda boleh menyediakan latar belakang kecerunan yang kemas dan ia akan mengendalikan peralihan kecerunan atau sebarang animasi yang anda mahu gunakan untuk latar belakang anda

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

Pada asasnya apa yang anda perlukan adalah untuk menentukan 'keadaan' yang berbeza dan apabila anda ingin menukar warna (contohnya apabila memilih ejen baharu) anda hanya perlu memanggil granimInstance.changeState('new-state'); dan itu sahaja!

Atas ialah kandungan terperinci Kesan Pendedahan Watak Pemilihan Watak Valorant. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!