คีย์เฟรมและการหน่วงลำดับ
สร้างแอนิเมชันซับซ้อนที่เริ่มทำงานเหลื่อมลำดับกัน
คีย์เฟรมและการหน่วงลำดับ เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
แอนิเมชันหลายขั้นตอน
การเปลี่ยนผ่านอย่างง่ายจะเคลื่อนจาก A ไป B สำหรับการเคลื่อนไหวหลายขั้นตอน เช่น การเด้ง การเต้นเป็นจังหวะ และการไล่สี Angular มี keyframes ให้ใช้ และสำหรับการสร้างแอนิเมชันให้หลายรายการทำงานตามลำดับ ก็มี stagger
ฟังก์ชันคีย์เฟรม
keyframes รับอาร์เรย์ของขั้นตอน style แต่ละขั้นมีค่า offset ตั้งแต่ 0 ถึง 1 เพื่อระบุตำแหน่งของขั้นตอนนั้นตลอดระยะเวลา
animate('1s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1 })
]))ทำความเข้าใจค่าออฟเซ็ต
offset คือสัดส่วนของระยะเวลาทั้งหมด ค่า 0 คือจุดเริ่มต้น และ 1 คือจุดสิ้นสุด ค่าออฟเซ็ตควรเพิ่มขึ้นตามลำดับในอาร์เรย์
เอฟเฟกต์การเด้ง
คีย์เฟรมช่วยให้การเคลื่อนไหวเลยจุดเป้าหมายเล็กน้อยแล้วกลับมาตั้งหลักได้ ทำให้เกิดเอฟเฟกต์การเด้ง
keyframes([
style({ transform: 'translateY(0)', offset: 0 }),
style({ transform: 'translateY(-20px)', offset: 0.5 }),
style({ transform: 'translateY(0)', offset: 1 })
])การไม่ระบุค่าออฟเซ็ต
หากไม่ระบุ offset Angular จะแบ่งคีย์เฟรมให้กระจายเท่า ๆ กันตลอดระยะเวลา
keyframes([
style({ opacity: 0 }),
style({ opacity: 1 })
])ฟังก์ชันค้นหา
หากต้องการสร้างแอนิเมชันให้กับองค์ประกอบลูกของโฮสต์ ให้ใช้ query เพื่อเลือกองค์ประกอบเหล่านั้นภายในการเปลี่ยนผ่าน
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
])
])ฟังก์ชันการเหลื่อมเวลา
stagger จะเพิ่มความต่างของเวลาระหว่างแอนิเมชันขององค์ประกอบแต่ละรายการที่ค้นพบ ทำให้เกิดเอฟเฟกต์ต่อเนื่องเป็นทอด ๆ
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('300ms', style({ opacity: 1 }))
])
])การเหลื่อมเวลาในรายการ
รวม query กับ stagger ในทริกเกอร์ของตัวครอบรายการ เพื่อให้รายการต่าง ๆ ค่อย ๆ ปรากฏทีละรายการ
trigger('listAnim', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 }),
stagger(80, animate('250ms', style({ opacity: 1 })))
], { optional: true })
])
])แฟล็กที่ไม่บังคับ
ส่ง { optional: true } ให้กับ query เพื่อไม่ให้แอนิเมชันเกิดข้อผิดพลาดเมื่อไม่มีองค์ประกอบที่ตรงกัน
การเหลื่อมเวลาแบบติดลบ
ค่าติดลบใน stagger จะกลับลำดับ ทำให้รายการท้าย ๆ ทำแอนิเมชันก่อน ซึ่งมีประโยชน์สำหรับการทำให้รายการออกไปเป็นทอด ๆ
stagger(-50, animate('200ms', style({ opacity: 0 })))หมายเหตุด้านประสิทธิภาพ
การเหลื่อมเวลาให้กับองค์ประกอบจำนวนมากอาจใช้ทรัพยากรมาก ควรกำหนดระยะเวลาต่อรายการให้สั้น และควรใช้ transform/opacity เพื่อให้แอนิเมชันทำงานบน GPU
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับคีย์เฟรมและการเหลื่อมเวลา
สรุปทบทวน
คุณได้เรียนรู้ว่า keyframes ใช้กำหนดการเคลื่อนไหวหลายขั้นตอนด้วยค่า offset ส่วน query กับ stagger ใช้สร้างแอนิเมชันให้หลายองค์ประกอบต่อเนื่องเป็นทอด ๆ ใช้ { optional: true } เพื่อความปลอดภัย และควรเลือกคุณสมบัติที่เหมาะกับ GPU
คำถามที่พบบ่อย
บทเรียน “คีย์เฟรมและการหน่วงลำดับ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “คีย์เฟรมและการหน่วงลำดับ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “คีย์เฟรมและการหน่วงลำดับ”
สร้างแอนิเมชันซับซ้อนที่เริ่มทำงานเหลื่อมลำดับกัน คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “คีย์เฟรมและการหน่วงลำดับ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐานแอนิเมชัน: trigger และ state
- การเปลี่ยนผ่านและจังหวะเวลา
- แอนิเมชันตอนเข้าและออก
- คีย์เฟรมและการหน่วงลำดับ