การรวมการเปลี่ยนภาพและภาพเคลื่อนไหว
ซ้อนการเปลี่ยนภาพและภาพเคลื่อนไหวเข้าด้วยกันเพื่อสร้างเอฟเฟกต์ส่วนติดต่อผู้ใช้ที่สวยงามและสอดประสาน
การรวมการเปลี่ยนภาพและภาพเคลื่อนไหว เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
การเคลื่อนไหวแบบหลายชั้น
ใช้ transition: และ animate: ร่วมกันสำหรับรายการที่ค่อย ๆ ปรากฏ AND เปลี่ยนตำแหน่งอย่างราบรื่น
ตัวอย่าง
รายการสิ่งที่ต้องทำที่รายการใหม่เคลื่อนเข้ามา และรายการเดิมจัดลำดับใหม่อย่างราบรื่น
{#each todos as todo (todo.id)}
<li in:fly={{ y: 20 }} animate:flip>{todo.text}</li>
{/each}ลำดับการทำงาน
Svelte จัดการทรานซิชันและแอนิเมชัน FLIP ที่ทำงานพร้อมกันได้อย่างราบรื่น
หลีกเลี่ยงความขัดแย้ง
ทรานซิชันมีผลต่อความทึบและตำแหน่งขององค์ประกอบ ส่วนแอนิเมชันจะย้ายองค์ประกอบ ทั้งสองทำงานแยกจากกัน
กำหนดระยะเวลาให้ใกล้เคียงกัน
ใช้ระยะเวลาที่ใกล้เคียงกันสำหรับทรานซิชันและแอนิเมชัน เพื่อให้การเคลื่อนไหวประสานกัน
ใช้การผ่อนจังหวะแบบกำหนดเอง
ใช้ฟังก์ชันการผ่อนจังหวะเดียวกันกับทั้งสองแบบ เพื่อให้ความรู้สึกสอดคล้องกัน
เฝ้าดูประสิทธิภาพ
แอนิเมชันจำนวนมากที่ทำงานพร้อมกันในรายการขนาดใหญ่อาจใช้ทรัพยากรมาก จำกัดจำนวนรายการที่มองเห็นหรือใช้การจำลองรายการ
ใช้ร่วมกับสโตร์
สโตร์แบบสปริงหรือทวีนสามารถขับเคลื่อนคุณสมบัติตัวเลขที่เปลี่ยนแปลงพร้อมกับทรานซิชันได้
การใช้งานจริง
แดชบอร์ด กระดานแบบลากแล้ววาง แกลเลอรีที่เรียงลำดับได้ — ทุกที่ที่รายการเปลี่ยนแปลงไปตามเวลา
การเข้าถึง
ปฏิบัติตาม prefers-reduced-motion อย่างสม่ำเสมอทั้งในทรานซิชันและแอนิเมชัน
เอฟเฟกต์เพิ่มความประณีต
การเคลื่อนไหวที่ประสานกันช่วยเพิ่มคุณภาพที่ผู้ใช้รับรู้ได้อย่างมาก และคุ้มค่ากับการลงแรง
ตรวจสอบความเข้าใจ
คุณสามารถใช้ transition: และ animate: ร่วมกันได้หรือไม่
สรุปทบทวน
ใช้ transition: สำหรับการเข้าและออก และใช้ animate: สำหรับการจัดลำดับใหม่ เพื่อสร้างอินเทอร์เฟซที่สมบูรณ์และประณีต
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “การรวมการเปลี่ยนภาพและภาพเคลื่อนไหว” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การรวมการเปลี่ยนภาพและภาพเคลื่อนไหว” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การรวมการเปลี่ยนภาพและภาพเคลื่อนไหว”
ซ้อนการเปลี่ยนภาพและภาพเคลื่อนไหวเข้าด้วยกันเพื่อสร้างเอฟเฟกต์ส่วนติดต่อผู้ใช้ที่สวยงามและสอดประสาน คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การรวมการเปลี่ยนภาพและภาพเคลื่อนไหว” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- animate:flip สำหรับการจัดลำดับรายการใหม่
- Store spring() และ tweened()
- ฟังก์ชัน Easing กำหนดเอง
- การรวมการเปลี่ยนภาพและภาพเคลื่อนไหว