วิธีเปลี่ยนหน้าแบบ Slide-In และ Slide-Out ที่สมบูรณ์แบบใน Next.js ด้วย Framer Motion

การแนะนำ

คุณเคยเจอเว็บไซต์หรือเว็บแอปพลิเคชันที่มีการเปลี่ยนหน้าที่น่าทึ่งจนทำให้คุณทึ่งหรือไม่? แอนิเมชั่นแบบสไลด์เข้าและออกที่ราบรื่นเหล่านี้ไม่เพียงแต่ดูน่าดึงดูดใจเท่านั้น แต่ยังมอบประสบการณ์ที่ราบรื่นและเป็นมิตรกับผู้ใช้อีกด้วย หากคุณสงสัยว่าจะนำการเปลี่ยนแปลงที่สวยงามเหล่านี้ไปใช้กับแอปพลิเคชัน Next.js ของคุณได้อย่างไร แสดงว่าคุณมาถูกที่แล้ว

ในบทช่วยสอนทีละขั้นตอนนี้ เราจะสำรวจวิธีใช้ Framer Motion ซึ่งเป็นไลบรารีแอนิเมชั่นที่ทรงพลัง เพื่อสร้างการเปลี่ยนหน้าแบบสไลด์เข้าและสไลด์ออกที่สมบูรณ์แบบในโครงการ Next.js ของคุณ ไม่ว่าคุณจะเป็นนักพัฒนาที่มีประสบการณ์ที่ต้องการพัฒนาทักษะ UI/UX ของคุณ หรือเป็นมือใหม่ที่ตื่นเต้นที่จะดำดิ่งสู่โลกแห่งแอนิเมชั่น คู่มือนี้จะแนะนำคุณตลอดกระบวนการทั้งหมด

ภาพรวมบทช่วยสอน

ในบทช่วยสอนนี้ เราจะครอบคลุมหัวข้อสำคัญต่อไปนี้:

• การตั้งค่าโครงการ Next.js: เราจะเริ่มต้นด้วยการสร้างแอปพลิเคชัน Next.js พื้นฐานหากคุณยังไม่มี การตั้งค่าโปรเจ็กต์ถือเป็นสิ่งสำคัญในการดำเนินการเปลี่ยนหน้า
• การติดตั้ง Framer Motion: คุณจะได้เรียนรู้วิธีติดตั้งและกำหนดค่าไลบรารี Framer Motion ในแอปพลิเคชัน Next.js ของคุณ Framer Motion มอบวิธีที่ตรงไปตรงมาในการเพิ่มภาพเคลื่อนไหวให้กับส่วนประกอบของคุณ
• การสร้างส่วนประกอบเค้าโครง: เราจะแนะนำแนวคิดของส่วนประกอบเค้าโครง ซึ่งจะทำหน้าที่เป็นรากฐานสำหรับการเปลี่ยนหน้าของเรา คุณจะเห็นวิธีจัดโครงสร้างส่วนประกอบนี้เพื่อให้สามารถนำกลับมาใช้ใหม่ได้อย่างเหมาะสมที่สุด
• การใช้ภาพเคลื่อนไหวแบบสไลด์เข้าและสไลด์ออก: หัวใจสำคัญของบทช่วยสอนนี้! เราจะเจาะลึกถึงลักษณะเฉพาะของการสร้างภาพเคลื่อนไหวแบบสไลด์เข้าและสไลด์ออกโดยใช้ Framer Motion คุณจะค้นพบวิธีนำภาพเคลื่อนไหวไปใช้กับแต่ละหน้าได้อย่างราบรื่น
• การทดสอบและการแก้ปัญหา: เราจะกล่าวถึงแนวทางปฏิบัติที่ดีที่สุดในการทดสอบภาพเคลื่อนไหวของคุณและให้คำแนะนำในการแก้ไขปัญหาทั่วไป
• การเพิ่มประสิทธิภาพ: จำเป็นอย่างยิ่งที่จะต้องแน่ใจว่าภาพเคลื่อนไหวของคุณจะไม่ส่งผลเสียต่อประสิทธิภาพของแอปพลิเคชันของคุณ เราจะแบ่งปันกลยุทธ์ในการเพิ่มประสิทธิภาพการเปลี่ยนภาพของคุณ

เมื่อสิ้นสุดบทช่วยสอนนี้ คุณจะมีความรู้และประสบการณ์เชิงปฏิบัติในการใช้การเปลี่ยนหน้าสไลด์เข้าและสไลด์ออกที่สะดุดตาในโครงการ Next.js ของคุณ เอาล่ะ มาเริ่มต้นและทำให้ช่วงการเปลี่ยนภาพเหล่านั้นสมบูรณ์แบบกันดีกว่า!

การตั้งค่าโครงการ Next.js

หากคุณยังไม่ได้ตั้งค่าโปรเจ็กต์ Next.js นี่เป็นจุดเริ่มต้นที่สมบูรณ์แบบ Next.js เป็นเฟรมเวิร์กอเนกประสงค์สำหรับการสร้างเว็บแอปพลิเคชันสมัยใหม่ และเล่นกับ Framer Motion ได้อย่างราบรื่น ทำตามขั้นตอนง่ายๆ เหล่านี้:

• ขั้นตอนที่ 1: ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js บนคอมพิวเตอร์ของคุณ ถ้าไม่ ให้ดาวน์โหลดและติดตั้งจากเว็บไซต์ Node.js อย่างเป็นทางการ
• ขั้นตอนที่ 2: เปิดเทอร์มินัลแล้วไปที่ไดเร็กทอรีที่คุณต้องการสร้างโปรเจ็กต์ Next.js
• ขั้นตอนที่ 3: เรียกใช้คำสั่งต่อไปนี้เพื่อสร้างโครงการ Next.js ใหม่:

npx create-next-app page-transition-next-app

หมายเหตุ: แทนที่ “page-transition-next-app” ด้วยชื่อโปรเจ็กต์ที่คุณต้องการ

• ขั้นตอนที่ 4: เมื่อสร้างโครงการแล้ว ให้ไปที่ไดเรกทอรีโครงการของคุณ:

cd page-transition-next-app

• ขั้นตอนที่ 5: ตอนนี้คุณสามารถเริ่มเซิร์ฟเวอร์การพัฒนาของคุณได้แล้ว:

npm run dev

นี่จะเป็นการเปิดแอปพลิเคชัน Next.js ของคุณที่ http://localhost:3000

เมื่อตั้งค่าโปรเจ็กต์ Next.js ของคุณแล้ว เราก็สามารถก้าวไปสู่ส่วนที่น่าตื่นเต้นได้ นั่นคือการเพิ่มภาพเคลื่อนไหวเข้าไป!

การติดตั้ง Framer Motion

Framer Motion เป็นไลบรารีแอนิเมชั่นน้ำหนักเบาและใช้งานง่ายสำหรับ React มันทำงานร่วมกับ Next.js ได้อย่างราบรื่น ทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับการเพิ่มภาพเคลื่อนไหวให้กับแอปพลิเคชัน Next.js ของคุณ ในการเริ่มต้น ให้เปิดเทอร์มินัลของคุณในไดเร็กทอรีโปรเจ็กต์แล้วรันคำสั่งต่อไปนี้:

npm install framer-motion -S

การดำเนินการนี้จะติดตั้ง Framer Motion เป็นการพึ่งพาในโปรเจ็กต์ของคุณ เมื่อการติดตั้งเสร็จสมบูรณ์ เราก็พร้อมที่จะดำเนินการต่อ

การสร้างองค์ประกอบเค้าโครง

ก่อนที่เราจะเจาะลึกเรื่องแอนิเมชั่น เรามาตั้งค่าองค์ประกอบเลย์เอาต์กันก่อน ส่วนประกอบนี้จะทำหน้าที่เป็นรากฐานสำหรับการเปลี่ยนหน้าของเรา ด้วยการห่อหุ้มหน้าของเราภายในองค์ประกอบเค้าโครง เราจึงสามารถรับประกันโครงสร้างที่สอดคล้องกันสำหรับการใช้ภาพเคลื่อนไหว

ในไดเร็กทอรี layouts ของโปรเจ็กต์ของคุณ (สร้างใหม่หากไม่มีอยู่) ให้สร้างไฟล์ใหม่ชื่อ PageTransitionLayout.tsx or .jsx ในไฟล์นี้ คุณจะกำหนดส่วนประกอบโครงร่าง นี่คือโครงสร้างพื้นฐาน:

layouts/PageTransitionLayout.tsx

import { motion, AnimatePresence } from "framer-motion";
import { ReactNode, FC } from "react";

// ROUTER
import { useRouter } from "next/router";

// TYPES
interface ILayoutProps {
  children: ReactNode;
}

const PageTransitionLayout: FC<ILayoutProps> = ({ children }) => {
  const router = useRouter();

  return (
    <AnimatePresence mode={'wait'}>
      <motion.div
        key={router.route}
        initial="initialState"
        animate="animateState"
        exit="exitState"
        transition={{
          type: "tween",
          duration: 0.5
        }}
        variants={{
          initialState: {
            opacity: 0
          },
          animateState: {
            opacity: 1
          },
          exitState: {
            opacity: 0
          }
        }}
        className="min-h-screen w-full" // Feel free to add your classes here
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

ในตัวอย่างนี้ เราใช้องค์ประกอบ AnimatePresence & motion.div ของ Framer Motion เพื่อล้อมเนื้อหาของเรา เราได้ตั้งค่าภาพเคลื่อนไหวแบบเฟดเข้าและเฟดเอาท์แบบง่ายๆ โดยใช้อุปกรณ์ประกอบฉาก initial, animate และ exit

ตอนนี้เรามีองค์ประกอบเลย์เอาต์แล้ว เราก็พร้อมที่จะใช้ภาพเคลื่อนไหวแบบสไลด์เข้าและสไลด์ออกบนเพจของเรา ในส่วนถัดไป เราจะสำรวจวิธีบรรลุถึงการเปลี่ยนแปลงที่น่าหลงใหลเหล่านี้

การใช้ภาพเคลื่อนไหวแบบสไลด์เข้าและสไลด์ออก

ตอนนี้ เรามาเจาะลึกใจกลางของบทช่วยสอนนี้กัน — การสร้างแอนิเมชั่นแบบสไลด์เข้าและสไลด์ออก เมื่อองค์ประกอบเค้าโครงของเราพร้อมแล้ว เราจึงสามารถใช้ภาพเคลื่อนไหวกับแต่ละหน้าได้อย่างราบรื่น ต่อไปนี้เป็นวิธีดำเนินการ:

• ขั้นตอนที่ 1: เริ่มต้นด้วยการสร้างหน้าใหม่หรือเลือกหน้าที่มีอยู่ที่คุณต้องการใช้ภาพเคลื่อนไหวแบบเลื่อนเข้าและเลื่อนออก ในโปรเจ็กต์ Next.js ของคุณ โดยปกติแล้วเพจต่างๆ จะอยู่ในไดเร็กทอรี pages หากคุณใช้ PageRouter
• ขั้นตอนที่ 2: นำเข้าส่วนประกอบ PageTransitionLayout ของคุณที่ด้านบนของไฟล์เพจ:

import { PageTransitionLayout } from "@/layouts";

ตรวจสอบให้แน่ใจว่าได้ปรับเส้นทางการนำเข้าตามโครงสร้างโปรเจ็กต์ของคุณ

• ขั้นตอนที่ 3: ล้อมเนื้อหาเพจของคุณด้วยองค์ประกอบ PageTransitionLayout:

pages/index.tsx

const Home = () => {
  return (
    <PageTransitionLayout>
      <div className="h-full w-full">
        <h1>HomePage</h1>
      </div>
    </PageTransitionLayout>
  );
}

• ขั้นตอนที่ 4: ปรับแต่งภาพเคลื่อนไหวของคุณ แม้ว่าองค์ประกอบเลย์เอาต์ของเราจะให้การเปลี่ยนแบบค่อยๆ เข้ามาและจางหายไปขั้นพื้นฐาน แต่คุณสามารถปรับแต่งสิ่งนี้ได้อย่างง่ายดายเพื่อให้ได้เอฟเฟกต์การเลื่อนเข้าและออก

สำหรับภาพเคลื่อนไหวแบบสไลด์เข้า คุณสามารถอัปเดตคุณสมบัติ variants ของ motion.div ในองค์ประกอบ PageTransitionLayout ของคุณได้:

variants={{
  initialState: {
    x: "100vw"
  },
  animateState: {
    x: 0
  },
  exitState: {
    x: "-100vw"
  }
}}

ด้วยการปรับแต่งคุณสมบัติเหล่านี้ คุณสามารถบรรลุภาพเคลื่อนไหวแบบเลื่อนเข้าและออก ซึ่งจะทำให้แอปพลิเคชันของคุณได้รับประสบการณ์ผู้ใช้ที่สวยงามและน่าดึงดูด

การทดสอบและการแก้ไขปัญหา

การทดสอบภาพเคลื่อนไหวของคุณเป็นขั้นตอนสำคัญในกระบวนการพัฒนา ต่อไปนี้เป็นเคล็ดลับในการทดสอบและแก้ไขปัญหาแอนิเมชั่นแบบสไลด์เข้าและสไลด์ออก:

• การเปลี่ยนหน้า: นำทางระหว่างหน้าต่างๆ ในแอปพลิเคชัน Next.js ของคุณเพื่อให้แน่ใจว่าภาพเคลื่อนไหวจะทริกเกอร์ตามที่คาดไว้ ให้ความสนใจกับเอฟเฟกต์ทั้งสไลด์เข้าและสไลด์ออก
• เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์: ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์เพื่อตรวจสอบองค์ประกอบและตรวจหาปัญหา CSS หรือภาพเคลื่อนไหว คอนโซล DevTools ยังสามารถแสดงข้อความแสดงข้อผิดพลาดที่เป็นประโยชน์ได้อีกด้วย
• เอกสารประกอบของ Framer Motion: โปรดดู "เอกสารประกอบของ Framer Motion" เพื่อดูคำแนะนำเพิ่มเติมและเคล็ดลับในการแก้ปัญหา เอกสารนี้เป็นทรัพยากรที่มีคุณค่าในการทำความเข้าใจความสามารถของห้องสมุดและแก้ไขปัญหาทั่วไป

ด้วยการทดสอบและแก้ไขปัญหาที่อาจเกิดขึ้นอย่างละเอียด คุณสามารถมั่นใจได้ว่าภาพเคลื่อนไหวของคุณปรับปรุงประสบการณ์ผู้ใช้โดยไม่มีข้อผิดพลาดหรือพฤติกรรมที่ไม่คาดคิด

การเพิ่มประสิทธิภาพการทำงาน

แม้ว่าแอนิเมชั่นสามารถปรับปรุงประสบการณ์ผู้ใช้ได้อย่างมาก แต่สิ่งสำคัญคือต้องปรับให้เหมาะสมเพื่อป้องกันผลกระทบด้านลบต่อประสิทธิภาพของแอปพลิเคชันของคุณ ต่อไปนี้เป็นกลยุทธ์การเพิ่มประสิทธิภาพบางส่วน:

• การแยกโค้ด: ใช้การแยกโค้ดในตัวของ Next.js เพื่อโหลดเฉพาะ JavaScript ที่จำเป็นสำหรับแต่ละหน้า เพื่อให้แน่ใจว่าโค้ดที่เกี่ยวข้องกับภาพเคลื่อนไหวจะถูกโหลดเมื่อจำเป็นเท่านั้น ซึ่งจะช่วยปรับปรุงเวลาในการโหลดหน้าแรก
• การโหลดแบบ Lazy: รูปภาพแบบ Lazy Loading และเนื้อหาอื่นๆ เพื่อลดขนาดการโหลดหน้าแรก ซึ่งสามารถช่วยรักษาเวลาในการโหลดที่รวดเร็วได้แม้จะมีภาพเคลื่อนไหวก็ตาม
• ลดการทาสีใหม่: ภาพเคลื่อนไหวสามารถกระตุ้นให้เบราว์เซอร์ทาสีใหม่ ซึ่งส่งผลต่อประสิทธิภาพ ลดการเปลี่ยนแปลงเค้าโครงระหว่างภาพเคลื่อนไหวเพื่อลดการทาสีใหม่
• การทดสอบบนอุปกรณ์หลายเครื่อง: ทดสอบภาพเคลื่อนไหวของคุณบนอุปกรณ์และเบราว์เซอร์ต่างๆ เพื่อให้มั่นใจว่าได้รับประสบการณ์ที่สม่ำเสมอและราบรื่นบนแพลตฟอร์มต่างๆ

เมื่อปฏิบัติตามกลยุทธ์การเพิ่มประสิทธิภาพเหล่านี้ คุณจะสามารถสร้างสมดุลระหว่างภาพเคลื่อนไหวที่น่าดึงดูดและประสิทธิภาพที่เหมาะสมที่สุดได้

ยินดีด้วย! คุณได้เรียนรู้วิธีการใช้การเปลี่ยนหน้าแบบสไลด์เข้าและสไลด์ออกใน Next.js ด้วย Framer Motion เรียบร้อยแล้ว ด้วยการทำตามขั้นตอนเหล่านี้และปรับแต่งภาพเคลื่อนไหว คุณจะสามารถสร้างประสบการณ์ผู้ใช้ที่น่าหลงใหลและสร้างความประทับใจไม่รู้ลืมได้

รู้สึกอิสระที่จะทดลอง สำรวจ และใช้แอนิเมชั่นเหล่านี้กับโปรเจ็กต์ของคุณ ความเป็นไปได้ไม่มีที่สิ้นสุด และความคิดสร้างสรรค์ของคุณก็มีขีดจำกัด

มีความสุขในการเคลื่อนไหว!

Stackademic

ขอบคุณที่อ่านจนจบ ก่อนที่คุณจะไป:

• โปรดพิจารณาปรบมือและติดตามผู้เขียน! 👏
• ติดตามเราบน "Twitter(X)", "LinkedIn" และ "YouTube"
• ไปที่ Stackademic.com เพื่อดูข้อมูลเพิ่มเติมว่าเราทำให้การศึกษาด้านการเขียนโปรแกรมฟรีทั่วโลกเป็นประชาธิปไตยได้อย่างไร