Animasi Reaksi Tanpa Usaha: Panduan untuk Gerak Penggubah

TL;DR: Catatan blog ini menyediakan panduan komprehensif menggunakan Framer Motion, perpustakaan animasi React. Ia merangkumi konsep utama seperti komponen gerakan, varian dan peralihan serta menyediakan contoh praktikal untuk mencipta butang pudar, bar sisi slaid masuk, mod boleh seret dan animasi flip kad.

Keutamaan pertama kami sebagai pembangun bahagian hadapan ialah mencipta aplikasi web yang memastikan pengguna sentiasa terlibat. Ini boleh dilakukan dengan membuat halaman interaktif dan menyediakan pengalaman pengguna yang lebih baik.

Animasi menjadikan halaman anda interaktif; mereka membimbing pengguna dan menjadikan interaksi menarik. Pergerakan visual kecil pada halaman, seperti interaksi pengguna atau acara atau navigasi halaman, memberikan rasa kemeriahan, seperti kita berinteraksi dengan makhluk hidup yang bertindak balas terhadap tindakan kita.

Animasi, secara ringkasnya, ialah cara mengubah unsur secara visual dengan mengemas kini sifat atau dimensinya dari semasa ke semasa pada interaksi atau acara tertentu. Contohnya, penunjuk pemuatan yang menunjukkan bahawa tindakan anda sedang dijalankan.

Terdapat dua cara untuk menghidupkan elemen pada halaman web (dua cara untuk menukar sifat elemen).

1. Melalui CSS, perpustakaan seperti Animate.css menyediakan satu set kelas animasi yang boleh ditambahkan pada elemen HTML.
2. Melalui JavaScript, perpustakaan seperti Framer Motion memanipulasi sifat elemen DOM pada masa jalan melalui kod.

Dalam artikel ini, kami akan meneroka Framer Motion, salah satu perpustakaan paling popular untuk animasi. Ia memberikan kesederhanaan dan fleksibiliti serta direka bentuk untuk berfungsi dengan rangka kerja bahagian hadapan moden seperti React.

Kenapa Framer Motion?

Framer Motion ialah perpustakaan animasi sedia pengeluaran untuk React yang mencipta animasi mudah seperti peralihan dan interaksi berasaskan gerak isyarat yang kompleks melalui sintaks deklaratifnya. Ia menampilkan:

• Kemudahan penggunaan: Framer Motion sangat mudah dan mudah digunakan, terima kasih kepada API dan kaedah intuitifnya.
• Fleksibiliti: Ia boleh digunakan untuk mencipta animasi kompleks seperti pan, seret, cubit atau animasi mudah seperti pudar, peralihan.
• Prestasi: Komponen gerakan dioptimumkan untuk prestasi, kerana ia dipaparkan di luar kitaran hayat React untuk berjalan lancar dan memastikan pengalaman pengguna yang lancar.
• Komuniti dan Sokongan: Dokumen yang luas, set contoh yang besar dan penerimaan yang hebat oleh komuniti memudahkan untuk bermula.

Bermula dengan Framer Motion

Tambahkan perpustakaan Framer Motion pada projek anda menggunakan pengurus pakej npm atau benang.

npm install framer-motion

Atau

npm install framer-motion

Setelah kebergantungan dimuatkan, anda boleh memasukkan ini dalam projek anda untuk mencipta animasi interaktif.

yarn add framer-motion

Konsep asas

Komponen gerakan:

Framer Motion dilengkapi dengan senarai komponen gerakan untuk mencipta animasi 120fps. Ia menyediakan sokongan gerak isyarat yang mengandungi semua elemen HTML (seperti motion.div) dan elemen SVG biasa (seperti motion.square) yang merupakan komponen React khas yang boleh digunakan.

// On Client side
import { motion } from "motion/react"

// On Server-side 
import * as motion from "motion/react-client"

Prop & API:

Framer Motion menyediakan senarai API sebagai prop, seperti awal, animate dan keluar yang mentakrifkan tingkah laku animasi.

<motion.div className="card" />

Awal prop dinyalakan pada lekap komponen, animate dinyalakan apabila komponen dikemas kini dan prop keluar dinyalakan apabila komponen dinyahlekap. Rujuk panduan animasi Framer Motion yang lengkap untuk mendapatkan butiran lanjut.

Komponen gerakan adalah bebas daripada kitaran hayat Reacts atau kitaran render untuk prestasi yang lebih baik. Oleh itu, kita harus bergantung pada keadaan React untuk animasi, dan bukannya menggunakan nilai gerakan yang akan mengemas kini gaya tanpa mencetuskan pemaparan semula.

<motion.button
  initial={{opacity: 0}}
  animate={{opacity: 1}}
  transition={{duration: 1}}
  exit={{opacity: 0}}
>
  Click Me
</motion.button>

Varian termasuk:

• listVariants: Mentakrifkan gelagat animasi untuk keseluruhan senarai, kami menghantar nilai varian pada prop yang akan mengakses sifat pada penembakannya. initial=”tersembunyi” dan animate=”kelihatan”. staggerChildren memastikan elemen kanak-kanak bernyawa dalam turutan.
• itemVariants: Mentakrifkan gelagat animasi untuk item senarai.
• Komponen motion.ul dan motion.li mewarisi varian untuk mencipta animasi yang diselaraskan.

Komponen tersuai: Mana-mana komponen React boleh ditukar kepada komponen gerakan dengan menghantarnya melalui fungsi motion.create().

import { motion, useMotionValue } from "framer-motion";

const MotionState = () => {
  const xPosition = useMotionValue(0);

  useEffect(() => {
    // It won’t trigger a re-render on the component
    const interval = setInterval(() => {
    xPosition.set(xPosition.get() + 100);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <motion.div
   >



<p>In the previous example, the <strong>motion.div</strong> element will be translated by 100px on the x position (horizontally, translateX(100px)) at an interval of 1s.</p>

<p><strong>Variants:</strong> framer-motion provides support for the variants, which allows the reuse of animation configurations across multiple elements.<br>
</p>

<pre class="brush:php;toolbar:false">const AnimatedList = () => {
  const listVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
       opacity: 1,
       y: 0,
       transition: {
           staggerChildren: 0.2,
      },
    },
  };

  const itemVariants = {
      visible: { opacity: 1 },
    hidden: { opacity: 0 },
  };

  return (
    <motion.ul initial="hidden" animate="visible" variants={listVariants}>
    {[1, 2, 3].map((item) => (
        <motion.li key={item} variants={itemVariants}>
        Item {item}
        </motion.li>
    ))}
    </motion.ul>
  );
};

Secara lalai, semua prop gerakan akan ditapis semasa menghantarnya ke komponen React. Animasi akan digunakan pada komponen, tetapi anda tidak boleh mengakses prop dalam React.

Untuk mengakses prop gerakan, hantar bendera forwardMotionProps: true sambil mencipta komponen gerakan.

const ReactComponent = (props) => {
  return <button {...props}>ClickMe>/button>;
};

const MotionComponent = motion.create(ReactComponent);

const FadingButton2 = () => {
  return (
    <MotionComponent
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 3 }}
    >
    Click Me
    </MotionComponent>
  );
};

Fungsi gerakan.create() juga menerima rentetan yang akan mencipta komponen gerakan elemen DOM tersuai.

const MotionComponent = motion.create(ReactComponent, {
  forwardMotionProps: true,
});

Nota: Elakkan menggunakan gerakan.create() dalam kaedah kitaran hayat React seperti (useEffect), kerana ini akan cipta komponen baharu setiap kali kaedah kitaran hayat dimatikan.

Sekarang anda mempunyai idea yang baik tentang cara Framer Motion berfungsi dan APInya, mari lihat beberapa contoh cara anda boleh menggunakannya untuk animasi biasa.

Contoh

Butang pudar

npm install framer-motion

• awal: Menetapkan keadaan awal butang kelegapan:0, apabila elemen itu bukan port pandangan.
• menghidupkan: Menetapkan keadaan butang kepada kelegapan:1 apabila elemen berada dalam port pandangan.
• peralihan: Mengkonfigurasi peralihan animasi; butang akan mengambil masa satu saat untuk beralih daripada kelegapan:0 kepada kelegapan:1
• keluar: Menetapkan keadaan butang apabila elemen keluar dari port pandangan.

Properti keluar berkuat kuasa hanya apabila dibalut dengan komponen AnimatePresence.

yarn add framer-motion

AnimatePresence memberi kesan kepada kanak-kanak langsung, iaitu komponen gerakan yang sedang dialih keluar daripada pokok komponen React.

Ini boleh berlaku apabila komponen sedang mengemas kini pada perubahan kitaran hayat (lekapkan, kemas kini, nyahlekap)

// On Client side
import { motion } from "motion/react"

// On Server-side 
import * as motion from "motion/react-client"

Perubahan kuncinya

<motion.div className="card" />

Kanak-kanak ditambah atau dialih keluar daripada senarai.

<motion.button
  initial={{opacity: 0}}
  animate={{opacity: 1}}
  transition={{duration: 1}}
  exit={{opacity: 0}}
>
  Click Me
</motion.button>

Bar sisi slaid masuk

import { motion, useMotionValue } from "framer-motion";

const MotionState = () => {
  const xPosition = useMotionValue(0);

  useEffect(() => {
    // It won’t trigger a re-render on the component
    const interval = setInterval(() => {
    xPosition.set(xPosition.get() + 100);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <motion.div
   >



<p>In the previous example, the <strong>motion.div</strong> element will be translated by 100px on the x position (horizontally, translateX(100px)) at an interval of 1s.</p>

<p><strong>Variants:</strong> framer-motion provides support for the variants, which allows the reuse of animation configurations across multiple elements.<br>
</p>

<pre class="brush:php;toolbar:false">const AnimatedList = () => {
  const listVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
       opacity: 1,
       y: 0,
       transition: {
           staggerChildren: 0.2,
      },
    },
  };

  const itemVariants = {
      visible: { opacity: 1 },
    hidden: { opacity: 0 },
  };

  return (
    <motion.ul initial="hidden" animate="visible" variants={listVariants}>
    {[1, 2, 3].map((item) => (
        <motion.li key={item} variants={itemVariants}>
        Item {item}
        </motion.li>
    ))}
    </motion.ul>
  );
};

Peralihan props memainkan peranan penting dalam animasi. Mereka mengawal cara animasi berkembang dari semasa ke semasa. Framer Motion menyokong berbilang sifat untuk animasi yang lancar.

• tempoh: Panjang animasi (dalam saat)
• kelewatan: Melambatkan permulaan animasi (dalam beberapa saat)
• kemudahan: Satu set fungsi pelonggaran yang menyokong cara animasi akan berkembang ('ease', 'easeIn', 'easeInOut')

Modal Boleh Seret

Gerakan pembingkai juga menyokong animasi interaktif dengan gerak isyarat seperti tuding, ketik dan seret.

const ReactComponent = (props) => {
  return <button {...props}>ClickMe>/button>;
};

const MotionComponent = motion.create(ReactComponent);

const FadingButton2 = () => {
  return (
    <MotionComponent
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 3 }}
    >
    Click Me
    </MotionComponent>
  );
};

• Halaman: Membungkus komponen kanak-kanak dengan animasi gerakan.
• Awal, menghidupkan, & keluar: Mengendalikan penampilan dan kehilangan komponen pada navigasi halaman.

Kesimpulan

Terima kasih kerana membaca! Framer Motion ialah perpustakaan animasi berkuasa yang memudahkan untuk menambah animasi yang menakjubkan pada komponen React. Ia membantu anda mencipta animasi ringkas untuk mengendalikan interaksi berasaskan gerak isyarat yang kompleks. Terdapat kemungkinan yang tidak berkesudahan dengan Framer Motion untuk menambah interaksi pada aplikasi React anda.

Versi baharu Essential Studio® tersedia untuk pelanggan sedia ada pada halaman Lesen dan Muat Turun. Jika anda baharu, daftar untuk percubaan percuma 30 hari kami untuk meneroka ciri kami.

Jangan ragu untuk menghubungi kami melalui forum sokongan, portal sokongan atau portal maklum balas kami. Kami sentiasa di sini untuk membantu anda!

Blog Berkaitan

• 5 Penonton React PDF Teratas untuk Pengendalian Dokumen yang Lancar
• 5 Perpustakaan Carta Reaksi Teratas untuk 2025
• Vite.js: Bina Bahagian Hadapan Lebih Pantas
• RxJS untuk React: Membuka Kunci Keadaan Reaktif

Atas ialah kandungan terperinci Animasi Reaksi Tanpa Usaha: Panduan untuk Gerak Penggubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!