Cipta Animasi Tatal yang Cantik Menggunakan Gerakan Framer

pengenalan

Menatal ialah sesuatu yang kami lakukan setiap hari pada skrin kami, tetapi pernahkah anda terfikir tentang cara menatal mempengaruhi pengalaman pengguna? Dalam dunia hari ini, menatal juga telah menjadi cara untuk memberikan pengguna anda pengalaman yang lancar dan memuaskan. Dengan alatan seperti Framer Motion, pembangun boleh menukar tatal menjadi pengalaman yang menarik dan menarik secara visual.

Hari ini, kami akan meneroka cara yang berbeza untuk menganimasikan tatal. Kami akan belajar tentang jenis animasi skrol dan cara ia digunakan. Kami akan memahami coraknya supaya kami boleh menambahkan animasi tatal pada mana-mana projek atau tapak kami.

Kami akan mencipta animasi dalam Next.js menggunakan Framer Motion. Jika anda lebih suka menggunakan mana-mana rangka kerja atau pustaka lain, anda boleh menggunakannya.

Jadi, tanpa berlengah lagi, mari mulakan.

Jenis Animasi Tatal

Terdapat dua jenis animasi skrol:

1. Tatal-dipautkan animasi: Animasi yang bergerak atau berubah berdasarkan sejauh mana anda telah menatal, elemen akan dikemas kini secara berterusan semasa anda menatal.

2. Tatal-dicetuskan animasi: Animasi biasa dicetuskan apabila elemen memasuki atau meninggalkan port pandangan.

Dengan gerakan Framer, anda boleh mencapai kedua-duanya. Mari fahami kedua-duanya satu persatu.

Animasi berpaut tatal

Animasi dipautkan tatal ialah animasi yang kemajuan atau pergerakan animasi dipautkan secara langsung sehingga sejauh mana pengguna telah menatal. Dalam jenis animasi ini, elemen berubah secara berterusan apabila pengguna menatal.

Ini bermakna jika anda berada di titik satu maka animasi akan menjejaki anda, dan ia juga akan berada di titik satu. Dan, Jika anda menatal dan pergi ke titik dua, animasi akan mengikuti anda ke titik itu.

Ciri Utama

• Animasi disegerakkan dengan kemajuan tatal.
• Sambil anda menatal, animasi dikemas kini dalam masa nyata berdasarkan jumlah yang anda telah tatal.
• Animasi ini boleh melibatkan pengalihan, penskalaan, putaran atau menukar rupa elemen, biasanya menggunakan useScroll dan gunakan cangkuk Transform(kita akan belajar tentang perkara ini di hadapan) dalam Framer Motion.

Animasi yang dicetuskan tatal

Animasi yang dicetuskan tatal berlaku apabila elemen memasuki atau meninggalkan port pandangan tertentu semasa anda menatal. Ini bermakna animasi bermula hanya apabila pengguna menatal ke bahagian tertentu halaman.

Jadi, jika saya berada di titik satu dan, saya menetapkan animasi yang dicetuskan tatal untuk titik tiga maka animasi ini akan berlaku pada titik tiga. Ini bermakna animasi akan dicetuskan hanya apabila saya mencapai ruang pandang itu (dalam kes ini ia adalah titik tiga)

Untuk memahami ini, anda boleh menyemak video ini?. Di sini, anda akan melihat apabila elemen oren itu datang dalam port pandangan bermakna ia boleh dilihat sepenuhnya pada skrin dan kemudian, pada masa itu, menunjukkan bar navigasi.

Ciri Utama

• Dicetuskan oleh Kedudukan Tatal: Animasi diaktifkan sebaik sahaja kedudukan tatal tertentu dicapai, dan bukannya disegerakkan secara berterusan dengan tatal, seperti animasi dipautkan tatal. Ini biasanya dicapai menggunakan keadaan seperti whileInView atau onEnter.

• Animasi Diskret: Tidak seperti animasi dipaut tatal, animasi dicetuskan tatal berlaku pada saat tertentu, seperti apabila elemen masuk atau keluar dari tempat pandang. Ini mungkin termasuk fade-in, slaid-in atau kesan visual lain yang berlaku sekali semasa pengguna menatal melepasi titik tertentu.

• Animasi Satu Kali atau Boleh Berulang: Animasi dicetuskan tatal boleh ditetapkan untuk dimainkan sekali sahaja apabila elemen mula-mula muncul, atau ia boleh mengulangi bila-bila masa elemen memasuki port pandangan sekali lagi, bergantung pada kes penggunaan.
  

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

Apa Seterusnya?

Sekarang kita memahami kedua-dua jenis animasi skrol ini dan perbezaannya, mari kita mula memahami corak yang digunakan dalam mencipta animasi ini. Ini akan membolehkan anda menambah animasi tatal pada mana-mana projek anda.

Mula-mula, kami akan menyediakan projek untuk memahami perkara ini secara praktikal, dan kemudian kami akan mencipta kedua-dua jenis animasi.

Persediaan Projek

Mari mulakan dengan menyediakan projek Next.js kami dengan semua kebergantungan yang diperlukan. Saya akan menggunakan StalkBlitz untuk projek ini tetapi anda juga boleh menggunakan VSCode. Walaupun semua langkah saya akan beritahu anda dari perspektif VSCode supaya anda boleh mengikuti langkah tersebut.

1. Buat projek Next.js baharu dengan TypeScript:
   

   npx create-next-app@latest
   

   Pada pemasangan, anda akan melihat gesaan berikut:
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

2. Pasang Framer Motion
   

     npm install framer-motion
   

3. Bersihkan fail lalai.
   Alih keluar kod lalai dalam app/page.tsx. Kami akan bermula dari awal untuk menumpukan pada animasi tatal kami. Fail sepatutnya kelihatan seperti ini.
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

4. Mulakan Pelayan Pembangunan
   

     <motion.div
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true }}  // animation will occur only once
     />
   
   

Cipta Animasi Tatal

Setelah projek kami disediakan, kami boleh mencipta kedua-dua jenis animasi skrol satu demi satu. Anda boleh mula menulis kod terus dalam fail app/page.tsx atau buat komponen berasingan dan import kesemuanya dalam fail app/page.tsx.

Mencipta Animasi Berkaitan Skrol

Terdapat beberapa contoh animasi terpaut skrol:

• Bar Kemajuan Tatal: Bar kemajuan bulat atau linear yang diisi semasa pengguna menatal ke bawah halaman.

• Tatal Paralaks: Imej latar belakang atau elemen bergerak pada kelajuan berbeza berbanding latar depan, mencipta kesan kedalaman semasa anda menatal.

• Elemen Pudar Masuk: Kandungan pudar ke paparan apabila pengguna menatal.

• Transformasi Skala: Elemen bertambah atau berkurang secara beransur-ansur dalam saiz berdasarkan kemajuan tatal. dll.

Mari buat beberapa animasi. Semasa mencipta sebarang animasi dipaut tatal anda akan kerap menggunakan kaedah dan cangkuk ini daripada gerakan pembingkai.

1. Pengesanan Kemajuan Tatal (useScroll): Menjejaki kedudukan tatal pengguna, biasanya mengembalikan nilai dari 0 hingga 1 yang mewakili kemajuan ke bawah halaman.
   

   npx create-next-app@latest
   

2. Mengubah Data Tatal (useTransform): Petakan kedudukan tatal kepada sifat animasi tertentu seperti kelegapan, skala atau kedudukan. Gunakan ini untuk mencetuskan animasi seperti pudar, bergerak, berputar, berskala atau perubahan warna semasa skrol.
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

3. Animasi dengan Elemen Pergerakan: Balut elemen sasaran dengan motion.div (atau mana-mana komponen gerakan) dan pautkan animasi kepada kemajuan tatal.
   

     npm install framer-motion
   

4. Peralihan: Gunakan peralihan yang lancar untuk menjadikan animasi terasa cair dan semula jadi.
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

5. Keadaan Awal dan Akhir: Gunakan prop awal, animasi atau gaya untuk menentukan rupa elemen pada mulanya dan kawal keadaan akhir mereka dengan useTransform atau animasi yang dipautkan ke scrollYProgress.
   

       npm run dev
   

Tatal Bar Kemajuan

Kita akan mulakan dengan mencipta bar kemajuan tatal. Untuk melakukan ini, buka editor teks anda, buat komponen baharu dan mula menulis kod di dalamnya.

   const { scrollYProgress } = useScroll();

Di sini kami menggunakan:

• useScroll: Menyediakan kedudukan skrol sebagai nilai normal antara 0 dan 1.

• useTransform: Petakan kemajuan tatal kepada julat nilai tertentu yang kami perlukan, sama ada untuk daharray lejang bulatan kemajuan atau sebarang transformasi lain yang ingin kami gunakan.

• Komponen gerakan: Kami menggunakan gerakan Framer Motion.bulatan untuk menghidupkan panjang lejang dalam masa nyata berdasarkan penatalan.

Animasi Teks Penskalaan Dinamik

Dalam contoh ini, kami akan mencipta kesan penskalaan dinamik terpaut tatal untuk elemen teks menggunakan Framer Motion.

1. Menjejaki Kemajuan Tatal: Sama seperti bar kemajuan, kami menggunakan useScroll() untuk mendapatkan kemajuan tatal semasa halaman. Nilai scrollYProgress berjulat dari 0 di bahagian atas hingga 1 apabila ditatal sepenuhnya.
   

     <motion.div
       initial="hidden"
       whileInView="visible"
       viewport={{ once: true }}  // animation will occur only once
     />
   
   

2. Menukar Nilai Tatal kepada Skala Kawalan: Kami menggunakan useTransform() untuk menukar kemajuan tatal kepada nilai skala yang berubah secara dinamik semasa pengguna menatal. Dalam kes ini, kami memetakan scrollYProgress daripada [0, 0.5, 1] ​​kepada nilai skala [1, 2, 1], ini bermakna teks akan berkembang daripada saiz asalnya, dua kali ganda saiz di tengah skrol dan mengecil kembali apabila anda mencapai bahagian bawah.
   

   npx create-next-app@latest
   

3. Menghidupkan Elemen Teks: Di dalam komponen motion.h1, kami akan menggunakan scaleValue kepada sifat gaya untuk menganimasikan kesan penskalaan teks dengan lancar berdasarkan kedudukan tatal. Teks akan "tumbuh" dan "mengecut" semasa pengguna menatal.
   

      What is your project named? my-app
      Would you like to use TypeScript? No / Yes
      Would you like to use ESLint? No / Yes
      Would you like to use Tailwind CSS? No / Yes
      Would you like to use `src/` directory? No / Yes
      Would you like to use App Router? (recommended) No / Yes
      Would you like to customize the default import alias (@/*)? No / Yes
      What import alias would you like configured? @/*
   
   

4. Menggayakan Bahagian: Teks dipusatkan dalam bahagian skrin penuh yang mempunyai kecerunan latar belakang untuk menambah daya tarikan visual. Latar belakang mencipta kecerunan licin daripada ungu kepada nila, menjadikan teks dinamik lebih menonjol.
   

     npm install framer-motion
   

Konsep Digunakan:

• useScroll: Kami menggunakan cangkuk ini sekali lagi untuk menjejak kemajuan tatal halaman, yang berfungsi sebagai pencetus untuk animasi.

• useTransform: Di sini, kami memetakan kemajuan tatal kepada nilai skala, menjadikan teks berkembang atau mengecut dengan lancar semasa acara tatal.

• Komponen gerakan: Komponen motion.h1 dianimasikan dalam masa nyata, dengan skala dilaraskan secara dinamik apabila nilai tatal berubah.

Kami sekali lagi menggunakan konsep yang sama. gunakanSkrol gunaUbah dan gerakkan. Jadi, ini adalah bahagian dipautkan skrol. Sekarang mari kita cipta beberapa animasi dicetuskan tatal.

Mencipta Animasi Dicetuskan Tatal

Animasi yang dicetuskan tatal tidak kekal berfungsi dengan beberapa contoh. Anda boleh memautkan animasi skrol ke komponen halaman tertentu. Sebagai contoh, saya mempunyai halaman pendaratan dengan dua elemen dan div yang mengandungi beberapa teks. Pada masa ini, tiada animasi pada halaman, tetapi saya ingin menambah animasi yang diaktifkan apabila port pandangan muncul.

Untuk ini, kami akan menggunakan animasi yang dicetuskan tatal. Seperti yang kita pelajari sebelum ini, animasi tercetus tatal berlaku apabila port pandangan tertentu kelihatan. Jadi, mari tambah elemen Framer Motion pada kod ini.

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

1. Kami mengimport gerakan dari framer-motion

2. Keseluruhan komponen dibalut dengan elemen bahagian, ia mempunyai beberapa penggayaan asas.

3. yang merupakan div gerakan pertama. Ia mengandungi kandungan utama (tajuk dan perenggan). Ia menggunakan permulaan dan whileInView untuk mencipta animasi yang dicetuskan tatal:

   initial={{ kelegapan: 0, y: 50 }}: Pada mulanya, kotak itu tidak kelihatan (kelegapan: 0) dan diletakkan 50 piksel ke bawah (y: 50).
   whileInView={{ opacity: 1, y: 0 }}: Apabila pengguna menatalnya ke paparan, ia menjadi kelihatan sepenuhnya (opacity: 1) dan bergerak ke kedudukan normalnya (y: 0).
   peralihan={{ tempoh: 0.8, ease: 'easeOut' }}: Peralihan mengambil masa 0.8 saat dan berkurangan dengan lancar.

   Kandungan di dalam digayakan dengan kelas Tailwind, memberikannya pelapik, latar belakang dengan 90% kelegapan, bayang, bucu bulat dan lebar maksimum.

4. Selepas itu, kami mempunyai div gerakan kedua (Teks Animasi Atas-ke-Bawah). Ini menghidupkan beberapa teks yang bergerak ke bawah dari bahagian atas skrin:

   initial={{ y: -100, kelegapan: 0 }}: Teks bermula 100 piksel di atas kedudukan biasa dan tidak kelihatan.
   whileInView={{ y: 0, kelegapan: 1 }}: Apabila ia kelihatan, ia bergerak ke kedudukan biasa dan menjadi kelihatan sepenuhnya.
   peralihan={{ kelewatan: 0.5, tempoh: 0.8 }}: Terdapat kelewatan 0.5 saat sebelum animasi bermula, memberikan kesan berperingkat.

Keluaran akhir akan kelihatan seperti ini.

Kesimpulan

Itu sahaja untuk blog hari ini. Kami merangkumi 2 jenis animasi dengan beberapa kaedah yang digunakan semasa mencipta animasi ini seperti: useScroll useTransition whileInView keadaan awal dan akhir serta perkara seperti itu.

Semua kod dengan lebih banyak sampel animasi telah saya tambahkan dalam projek StalkBliz saya. Anda boleh menyemaknya di sini dan melihat lebih banyak contoh animasi skrol dengan kod. Jika anda ingin meneroka lebih banyak prop, kaedah dan contoh animasi tatal, anda boleh menyemak dokumen tatal Framer Motion di sini.

Terima kasih kerana membaca blog ini. Jika anda belajar sesuatu daripadanya, sila like dan kongsikannya dengan rakan dan komuniti anda. Saya menulis blog dan berkongsi kandungan pada JavaScript, TypeScript, Sumber Terbuka dan topik berkaitan pembangunan web lain. Jangan ragu untuk mengikuti saya di sosial saya. Saya akan berjumpa anda dalam yang seterusnya. Terima Kasih :)

• Twitter
• LinkedIn
• GitHub

Atas ialah kandungan terperinci Cipta Animasi Tatal yang Cantik Menggunakan Gerakan Framer. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!