Kesan Pendedahan Watak Pemilihan Watak Valorant

王林
Lepaskan: 2024-07-22 19:33:33
asal
323 orang telah melayarinya

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

three images of Omen, a valorant Agent

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();
  }
});
Salin selepas log masuk

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
      });
Salin selepas log masuk

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
      });
Salin selepas log masuk

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
      });
Salin selepas log masuk

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'],
            ]
        },
        ...
    }
});
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan